1. 給table加邊框

table{border-collapse: collapse; /*表格的邊框合并為一個(gè)單一的邊框*/ } table, table tr th, table tr td { border:1px solid #ccc; }

還有種傻傻的方法：

table{border-top:1px solid #ccc;border-left:1px solid #ccc; }table tr td, table tr th{border-right:1px solid #ccc;border-bottom: 1px solid #ccc; }

2.給table的th固定寬度

① 設(shè)置table的寬度

② table設(shè)置table-layout : fixed ;

③ ?設(shè)置th寬度?

?3.給table加滾動(dòng)條

在table外包一層div，div設(shè)置overflow屬性

div{overflow-x: scroll; }

?4.給td加滾動(dòng)條

在td里加一層div，div寬度100%，且設(shè)置overflow屬性

?5.td里嵌套table，且table有滾動(dòng)條

　① 最外層的table加上寬度、table-layout:fixed;word-break:break-all;（防止內(nèi)層的table內(nèi)容過長(zhǎng)，將外層td撐開）

? ? ?②在td和第二層table之間，加一層div;div設(shè)置overflow屬性，再給內(nèi)層table的th設(shè)置寬度就行了，

6.隱藏滾動(dòng)條

.classname :: -webkit-scrollbar{ display:none; }

7.如下圖，th在左側(cè)，右側(cè)td，第一行的td設(shè)置了colspan=“8”，使用了colspan后，設(shè)置列寬(th/td的寬度)不生效：

?

解決辦法：添加colgroup屬性，col設(shè)置列的寬度。（若td設(shè)置了colspan,且colgroup設(shè)置了col的寬度，但ie下寬度仍不生效，記得：table加上樣式table-layout : fixed ;）

<colgroup><col width = '20%'><col width = '10%'><col width = '10%'><col width = '10%'><col width = '10%'><col width = '10%'><col width = '10%'><col width = '10%'><col width = '10%'> </colgroup>

8. 設(shè)置td的內(nèi)容超出部分以省略號(hào)顯示（title屬性展示完整數(shù)據(jù)）

table tr td {overflow: hidden;text-overflow:ellipsis;white-space: nowrap; }

（若不生效，給 table 設(shè)置寬度和table-layout : fixed ;）

超出兩行，再以省略號(hào)顯示（不兼容ie）：
table table td{overflow:hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;word-break:break-all;}

?9. 兼容問題：ie9下，表格出現(xiàn)空格以及錯(cuò)位。

　 如圖：第一行的操作人右移了，出現(xiàn)了空格。

? ?

?

? ? 解決辦法： 網(wǎng)上查，這是ie9的一個(gè)bug，?</td>與<td>間有空行時(shí)會(huì)發(fā)生錯(cuò)位。所以，去除掉td標(biāo)簽內(nèi)的空格。

?

10. tr之間出現(xiàn)空白行

　 ?如圖：我在用字符串拼接，生成表結(jié)構(gòu)的時(shí)候，發(fā)現(xiàn)渲染出的表結(jié)構(gòu)tr之間有空行

　　var html ='<tr><th>名稱</th><td>內(nèi)容</td><th>名稱</th><td>內(nèi)容</td></tr>';$('tbody').append(html);

?

?　　

　　檢查發(fā)現(xiàn)：坑啊，結(jié)束標(biāo)志寫錯(cuò)了，</tr>寫錯(cuò)成了<tr/>，記錄下來，不知道有沒有人和我一起犯蠢。

11. td 在ie瀏覽器里 沒有邊框，谷歌瀏覽器正常

　　檢查發(fā)現(xiàn)，td設(shè)置了相對(duì)定位position:relative,在ie下有兼容問題，

? ? ? 解決：設(shè)置background-clip屬性（規(guī)定背景的繪制區(qū)域） ? ? -----> ? ? ?

table tr td {padding: 0px;height: 40px;position: relative;background-clip: padding-box; }

?

轉(zhuǎn)載于:https://www.cnblogs.com/anyxl/p/9318755.html

總結(jié)

以上是生活随笔為你收集整理的table的td、th的一些样式问题（宽度，边框，滚动条）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。