跳到主要內容

發表文章

目前顯示的是有「table」標籤的文章

固定表格的每一欄 td 寬度,使其不隨內容而改變

【HTML】 <table clas="table-space"> <tr> <td>文字較少</td> <td>這一行的文字較多</td> <td>文字較少</td> </tr> </table> 【示意圖】 設定前 設定後 【CSS語法】 table.table-space { table-layout:fixed;word-break:break-all;} 一般來說,表格內的 td 會隨著內容自動拉出對等的寬度,只有一張表還沒什麼感覺,如果同時有很多張表排列下來,每個表格的欄位寬度都不同,會造成視覺上的不適,這時就可以加上語法來讓每個欄位寬度都是均分的。 不過要特別注意,表格的寬度要設定為 100%,不然感覺不出效果。

利用CSS設定表格首行&首列維持固定位置

【HTML】 <div>      <table>        <thead>          <tr>            <th>標題A</th>            <th>標題B</th>            <th>標題C</th>            <th>標題D</th>            <th>標題E</th>          </tr>        </thead>        <tbody>          <tr>            <td>內文</td>            <td>內文</td>            <td>內文</td>            <td>內文</td>            <td>內文</td>         ...