怎么设置table(表格)手机端自适应宽度

咱们在wordpress文章页面常常会用到表格，有些是从其余网页或者文档复制粘贴过来的，在电脑设备网页上都能很好的展现，可是在移动设备上或者低分辨率设备上却常常撑破列宽，非常影响美观和客户体验。这里就这个问题分享一下解决的方法。

如下面这个表格为例：

表格范例-周杰伦jay专辑《范特西》专辑曲目

正确的（自适应宽度）代码以下：

<div>周杰伦jay专辑《范特西》专辑曲目</div>

<table style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2">

<tbody>

<tr>

<th style="text-align: left;">序号</th>

<th style="text-align: left;">曲名</th>

<th style="text-align: left;">做词</th>

<th style="text-align: left;">做曲</th>

<th style="text-align: left;">编曲</th>

</tr>

<tr>

……

</tr>

</tbody>

</table>

能够看到上面代码中关于定义table(表格)属性的代码是：

<table style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2">

常常见到的非自适应宽度的代码，也就是在移动端会撑破列宽的代码则是：

<table style="height: 125px;" border="1" width="640" cellspacing="0" cellpadding="2">

看出来区别没有，关于style和width的设置不同！

总结：在定义表格时，width（整个表格的宽度）不要设置为固定数值，定义为百分比类型，例如90%或者95%；再追加style="table-layout:fixed;"，这样作可使半角连续字符强制换行，不至于撑破列宽。须要注意的是，使用此参数后，不要轻易在tr(行)或td(列)中加入height属性，会使table再也不被内容撑出适合的高度。作到这两点以后，你table(表格)在任何状况下均可以很好的自适应宽度显示了。

补充一下，上面定义table(表格)参数的意思，border：表格的线宽为1；cellspacing：表格内数据与表格间隔为0；cellpadding：单元格与单元格间隔为2。