我們在wordpress文章頁面經(jīng)常會用到表格，有些是從其他網(wǎng)頁或者文檔復(fù)制粘貼過來的，在電腦設(shè)備網(wǎng)頁上都能很好的展示，但是在移動設(shè)備上或者低分辨率設(shè)備上卻經(jīng)常撐破列寬，很是影響美觀和客戶體驗。這里就這個問題分享一下解決的方法。
以下面這個表格為例：
表格范例-周杰倫jay專輯《范特西》專輯曲目
正確的（自適應(yīng)寬度）代碼如下：
<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>
可以看到上面代碼中關(guān)于定義table(表格)屬性的代碼是：
- <table style="table-layout: fixed;" border="1" width="100%" cellspacing="0" cellpadding="2">
經(jīng)常見到的非自適應(yīng)寬度的代碼，也就是在移動端會撐破列寬的代碼則是：
- <table style="height: 125px;" border="1" width="640" cellspacing="0" cellpadding="2">
看出來區(qū)別沒有，關(guān)于style和width的設(shè)置不一樣！
總結(jié)：在定義表格時，width（整個表格的寬度）不要設(shè)置為固定數(shù)值，定義為百分比類型，例如90%或者95%；再追加style="table-layout:fixed;"，這樣做可以使半角連續(xù)字符強制換行，不至于撐破列寬。需要注意的是，使用此參數(shù)后，不要輕易在tr(行)或td(列)中加入height屬性，會使table不再被內(nèi)容撐出適合的高度。做到這兩點之后，你table(表格)在任何情況下都可以很好的自適應(yīng)寬度顯示了。
補充一下，上面定義table(表格)參數(shù)的意思，border：表格的線寬為1；cellspacing：表格內(nèi)數(shù)據(jù)與表格間隔為0；cellpadding：單元格與單元格間隔為2。
