代码中关于定义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; }
本文作者为萝莉工坊,转载请注明。