CSS表格寬度設置詳解

在CSS中，我們可以使用width屬性來設置表格的寬度，這個屬性可以應用于table元素，也可以應用于td或th元素，具體取決于你想要設置整個表格的寬度還是單個列或行的寬度。

設置整個表格的寬度

如果你想要設置整個表格的寬度，你可以將width屬性應用于table元素。

<table style="width: 500px;">
  <tr>
    <td>列1</td>
    <td>列2</td>
  </tr>
  <tr>
    <td>行1，列1</td>
    <td>行1，列2</td>
  </tr>
</table>

在這個例子中，表格的寬度被設置為500像素。

設置單個列或行的寬度

如果你想要設置單個列或行的寬度，你可以將width屬性應用于td或th元素。

<table>
  <tr>
    <td style="width: 200px;">列1</td>
    <td>列2</td>
  </tr>
  <tr>
    <td>行1，列1</td>
    <td style="width: 300px;">行1，列2</td>
  </tr>
</table>

在這個例子中，***列的寬度被設置為200像素，第二列的寬度被設置為300像素。

百分比寬度

除了像素寬度，你還可以使用百分比來設置寬度。

<table style="width: 100%;">
  <tr>
    <td style="width: 50%;">列1</td>
    <td style="width: 50%;">列2</td>
  </tr>
</table>

在這個例子中，表格的寬度被設置為100%，即充滿整個頁面寬度，***列和第二列的寬度都設置為50%，即每列占據(jù)頁面寬度的一半。

通過CSS的width屬性，我們可以輕松地設置表格的寬度，無論是整個表格還是單個列或行。