表格的宽度和高度

在HTML中，表格的宽度和高度是控制布局的重要属性。通过CSS或HTML属性可以灵活调整表格尺寸，适应不同场景需求。

表格宽度的设置方式

表格宽度可以通过多种方式定义，常见的有固定像素值和百分比两种形式。固定宽度适合需要精确控制的场景，百分比则用于响应式布局。

<table style="width: 800px">
  <!-- 固定宽度表格 -->
</table>

<table style="width: 90%">
  <!-- 百分比宽度表格 -->
</table>

CSS的width属性优先级高于HTML的width属性。现代开发中推荐使用CSS方式：

table {
  width: min(100%, 1200px);
}

表格高度的控制方法

表格高度通常由内容自动撑开，但也可以通过CSS显式设置：

<table style="height: 400px">
  <tr>
    <td>单元格内容</td>
  </tr>
</table>

对于行高的控制更为常见：

tr {
  height: 50px;
}

响应式表格的宽度处理

在移动设备上，表格需要特殊处理宽度：

@media (max-width: 600px) {
  table {
    width: 100%;
    display: block;
    overflow-x: auto;
  }
}

使用max-width可以防止表格溢出容器：

<table style="max-width: 100%">
  <!-- 内容 -->
</table>

单元格尺寸的特殊处理

单元格宽度可以通过多种方式定义：

<table>
  <colgroup>
    <col style="width: 20%">
    <col style="width: 30%">
    <col style="width: 50%">
  </colgroup>
  <!-- 表格行 -->
</table>

单元格最小宽度可以通过CSS控制：

td {
  min-width: 100px;
}

表格布局算法的差异

table-layout属性影响宽度计算方式：

table {
  table-layout: fixed; /* 固定布局 */
  /* 或 */
  table-layout: auto; /* 自动布局(默认) */
}

固定布局示例：

<table style="table-layout: fixed; width: 500px">
  <tr>
    <td width="200">固定200px</td>
    <td>剩余宽度</td>
  </tr>
</table>

嵌套表格的尺寸处理

嵌套表格需要特别注意宽度继承：

<table style="width: 600px">
  <tr>
    <td>
      <table style="width: 80%">
        <!-- 嵌套表格 -->
      </table>
    </td>
  </tr>
</table>

边框对尺寸的影响

边框会增加表格实际占用的空间：

table {
  width: 500px;
  border: 1px solid #000;
  border-collapse: collapse; /* 消除边框间距 */
}

表格滚动区域的实现

固定表头滚动内容区域：

<div style="height: 300px; overflow: auto">
  <table>
    <thead style="position: sticky; top: 0">
      <!-- 表头 -->
    </thead>
    <!-- 表格内容 -->
  </table>
</div>

表格与Flexbox/Grid的配合使用

现代布局中表格与其他布局方式结合：

.table-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.table-container > div {
  display: table-cell;
}

打印样式中的表格尺寸

确保打印时表格完整显示：

@media print {
  table {
    width: 100% !important;
    page-break-inside: avoid;
  }
}