之前在做table的時候，因為不是用來做資料的展示的，所以對於具體的格式沒有太高的要求，所以沒有去深入了解，這次在做乙個資料展示列表的時候使用table，因為假設每乙個單元格資料是沒有固定長度的，所以為了介面不會因為資料的變化格式發生大變化，所以希望table的每一列都是固定寬度。然後使用js對資料處理。
但是在使用css設定時：
.item_list {
display: inline-block;
position: absolute;
right: 5%;
top: 45px;
width: 40%;
height: 90%;
border: 1px solid white;
border-radius: 5px;
table-layout: fixed;
text-align: center;
overflow-y: scroll;
.item_list tr td {
width: 22%; //一共五列，注意因為有邊框，所以不能100%
.item_list tr>:first-child { //第一列顯示序號，所以寬度較小
width: 8%;
這樣設定之後每一的寬度還是隨著列單元格中的內容長度發生變化。
需要再新增.item_list{
word-break: break-all;
word-wrap: break-word;
這樣之後達到了固定列寬的作用，不過還有個問題這樣，單元格內容過長會自動換行導致行高不一致，這個可以採用tbale屬性解決，也可以使用js在資料載入時對資料進行處理來解決這個行高的問題
table 固定首列
首先，table外層套兩層div，outerdiv和 innerdiv 名稱 性別班級 語文數學 合計 張三男 28090170 李四男2 8090 170 outerdiv和innerdiv的樣式設定如下 outerdiv innerdiv設定table的樣式 注 第一列position設為abs...
table固定表頭
html中table樣式固定表頭，下面的內容滾動 html 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn...
固定table的表頭
原貼 另可參考 根據固定表頭的兩種方式 固定表頭兩種方式 1.表頭和表內容分別在兩個table中,互不干擾.優點 實現簡單 缺點 兩個table 的列寬不好保持一致,缺乏靈活性 2.用標籤的屬性來處理 html view plain copy span style font size 18px ht...