平時工作中大多會引用官網(wǎng)封裝好的表格組件，于是將基礎(chǔ)標(biāo)簽的寫法以及注意事項都忘記了错忱，這里說明幾個需要注意的點
1.設(shè)置表格td的寬度為相同寬度儡率，只需要一個屬性
table-layout:fixed;
設(shè)置了這個屬性后，雖然每個格子的寬度一樣以清，但還是可以單獨對當(dāng)前列的寬度進(jìn)行設(shè)置哦
2.表格滾動條
平時使用表格標(biāo)簽過程中可能發(fā)現(xiàn)即使設(shè)置了最外層盒子的overflow hidden屬性儿普，表格依然整體展示在容器里面，擠到換行也不出滾動條掷倔，這是因為沒有給表格設(shè)置寬度眉孩，默認(rèn)表格的寬和容器一樣，所以如果給表格設(shè)置的寬度超過了容器的寬度就會出現(xiàn)滾動條啦
3.滾動條的樣式設(shè)置
這里只說最主要的屬性，滾動條出現(xiàn)在哪個容器就給哪個容器設(shè)置浪汪，例如容器的類名為tableBox
.tableBox::-webkit-scrollbar{? ? ? ? ? ? display:block;? width:5px;? ? height:5px;? ? ? border:1px solid transparent; }? ? 這里的值自己設(shè)置就好? 設(shè)置滾動條的展示基礎(chǔ)狀態(tài)
.tableBox::-webkit-scrollbar-button{? display:none障贸；? ? }? ? 設(shè)置滾動條是否展示兩側(cè)的按鈕
.tableBox::-webkit-scrollbar-thumb{? background:rgba(39,39,39,0.15);? ? ? border-radius:5px; }? ? 設(shè)置滑動的按鈕樣式，顏色邊框等
.tableBox::-webkit-scrollbar-trank{? background:rgba(39,39,39,0.15);? ? ? border-radius:5px; }? 設(shè)置滑軌的背景顏色等
4.表格行列的固定
這里需要用到一個非常重要的屬性position:sticky;也就是粘性定位吟宦，然后再設(shè)置top,left的具體位置就可以了篮洁，比如，我只想要固定表頭和首列殃姓，那就可以在使用粘性定位的同時袁波，給表頭行一個top:0px；首列left:0px;? 固定幾行幾列其實就根據(jù)具體情況復(fù)給相應(yīng)的值就可以實現(xiàn)蜗侈，都是一個道理篷牌。
table thead tr th{ position:sticky; top:0;} 表頭固定在原地
table>tbody>tr>td:nth-child(1){? position:sticky;left:0; }? 表體第一列都固定在原地
不要忘了行列的公共部分，也就是左上角的那一個格子
table>thead>tr>td:nth-child(1){ position:sticky; top:0px; left:0px;} 上下同時需要固定為0
除此之外還會出現(xiàn)問題
①層級不對踏幻，只需要提高首行和首列的層級即可
②調(diào)整層級后枷颊，只有文字固定在原地了，其實格子是固定住了该面，只是之前的格子顏色是設(shè)置給了tr夭苗，在滑動中滑動的格子會插在tr和當(dāng)前固定的th或者td中間的，所以注意盡量把表格的顏色樣式加給td或者th隔缀，這樣背景隨時都會鋪在格子下面题造，下面的文字也就不會透過來了
5.表格邊框設(shè)置
給table標(biāo)簽添加 屬性 border=“1”? cellspacing=“0”? cellpadding=“0”? 寫在行內(nèi)樣式中就可以了
6.表格中的數(shù)字或者文字不換行，添加屬性
word-break : break-all ;
