给WordPress添加自适应表格宽度100% 让表格自适应屏幕云服务器怎么样?云服务器值不值得购买?云服务器好不好?
wordpress自带的表格不能自适应屏幕宽带，每次新建了表格，电脑上显示正常的，结果换到手机上就超出屏幕宽度了，很麻烦，更重要的是很不美观，本次我就问为大家带来一个添加自适应表格的教程。
案列分析
我们可以看到代码中关于定义table(表格)属性的代码是（重点）：
<table style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2">上述代码解析：border—表格的线宽为1；cellspacing—表格内数据与表格间隔为0；cellpadding—单元格与单元格间隔为2，这样就可以实现表格自适应了，但是有个问题里面的文字会自动换行，导致高度发生变化，也不是很好看。所以我还带来了一种方法：
自适应表格代码：
还有一种办法就是给文字也加上自适应，不过上面的代码就不适用了，如果要实现文字和表格都自适应可以用下面的代码：
<h3>系统自适应表格</h3> <div class="table-r"> <table width="100%"> <tbody> <tr> <td width="50%">自适应表格</td> <td width="50%">输入文字</td> </tr> <tr> <td width="50%">自适应表格</td> <td width="50%">输入文字</td> </tr> <tr> <td width="50%">自适应表格</td> <td width="50%">输入文字</td> </tr> <tr> <td width="50%">自适应表格</td> <td width="50%">输入文字</td> </tr> </tbody> </table> </div>上面就是自适应表格的代码了，如果还想添加更多行和列，自己复制几行就行了。就是每次编辑文章的时候很麻烦，需要自己一个个找到并输入字体，总体感觉不是很直观。不过这个目前来说还是很实用。还有就是上面的示例代码中为两栏自适应表格，如需多栏自适应表格，还需要将代码中的“50%”修改成3栏“33.33%”或着四栏修改成“25%”等。以此类推就行了。
表格字体居中代码：
上述表格创建好了，里面的字体不会居中，你如果想还让表格内的字体居中对齐的话，那么需要在wordpress主题的style样式表中添加以下样式，达成居中效果。
.table-r td{ text-align: center; }
来源链接：https://www.vpssz.com/
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
郑重声明:VPS主机评测仅提供资料收集及VPS云主机信息推介，不提供任何VPS云主机及代购业务！
