wordpress自帶的表格不能自適應屏幕寬帶，每次新建了表格，電腦上顯示正常的，結果換到手機上就超出屏幕寬度了，很麻煩，更重要的是很不美觀，本次我就問為大家帶來一個添加自適應表格的教程。

案列分析

我們可以看到代碼中關于定義table(表格)屬性的代碼是(重點)：

上述代碼解析：border—表格的線寬為1；cellspacing—表格內數據與表格間隔為0；cellpadding—單元格與單元格間隔為2，這樣就可以實現表格自適應了，但是有個問題里面的文字會自動換行，導致高度發生變化，也不是很好看。所以我還帶來了一種方法

自適應表格代碼：

還有一種辦法就是給文字也加上自適應，不過上面的代碼就不適用了，如果要實現文字和表格都自適應可以用下面的代碼：

系統自適應表格

自適應表格	輸入文字
自適應表格	輸入文字
自適應表格	輸入文字
自適應表格	輸入文字

上面就是自適應表格的代碼了，如果還想添加更多行和列，自己復制幾行就行了。就是每次編輯文章的時候很麻煩，需要自己一個個找到并輸入字體，總體感覺不是很直觀。不過這個目前來說還是很實用。還有就是上面的示例代碼中為兩欄自適應表格，如需多欄自適應表格，還需要將代碼中的“50%”修改成3欄“33.33%”或著四欄修改成“25%”等。以此類推就行了。

表格字體居中代碼：

上述表格創建好了，里面的字體不會居中，你如果想還讓表格內的字體居中對齊的話，那么需要在wordpress主題的style樣式表中添加以下樣式，達成居中效果。

1

2

3

.table-r td{

text-align: center;

}

總結

以上是生活随笔為你收集整理的wordpress自适应表格_给WordPress添加自适应表格 让表格自适应屏幕的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。