表格的宽度和高度

在HTML中，表格的宽度和高度是控制布局的重要属性。通过调整这些属性，可以精确控制表格的尺寸，从而适应不同的设计需求。以下从多个角度详细探讨表格尺寸的设置方法。

表格宽度的设置方法

表格宽度可以通过width属性或CSS样式来定义。以下是几种常见的方式：

使用HTML属性设置宽度

直接在<table>标签中使用width属性，单位可以是像素（px）或百分比（%）。

<table width="500px" border="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

使用CSS设置宽度

通过CSS的width属性可以更灵活地控制表格宽度。例如：

<style>
  .custom-table {
    width: 80%;
    border: 1px solid #000;
  }
</style>
<table class="custom-table">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

响应式表格宽度

为了让表格适应不同屏幕尺寸，可以使用百分比单位或结合媒体查询：

<style>
  .responsive-table {
    width: 100%;
    max-width: 800px;
  }
  @media (max-width: 600px) {
    .responsive-table {
      width: 95%;
    }
  }
</style>
<table class="responsive-table" border="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

表格高度的设置方法

表格高度的设置方式与宽度类似，但实际应用中需注意内容对高度的动态影响。

使用HTML属性设置高度

在<table>标签中使用height属性：

<table height="200px" border="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

使用CSS设置高度

通过CSS的height属性可以更精确地控制：

<style>
  .fixed-height-table {
    height: 150px;
    border: 1px solid #000;
  }
</style>
<table class="fixed-height-table">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

动态高度与内容溢出

当内容超出固定高度时，可以通过overflow属性处理：

<style>
  .scrollable-table {
    height: 100px;
    overflow: auto;
  }
</style>
<table class="scrollable-table" border="1">
  <tr>
    <td>这是一个很长的内容，可能会超出表格高度</td>
  </tr>
</table>

单元格宽度和高度的特殊处理

单元格宽度分配

通过<colgroup>和<col>标签可以统一设置列宽：

<table border="1">
  <colgroup>
    <col style="width: 30%">
    <col style="width: 70%">
  </colgroup>
  <tr>
    <td>左侧列</td>
    <td>右侧列</td>
  </tr>
</table>

单元格高度控制

直接对<td>或<th>设置高度：

<table border="1">
  <tr>
    <td style="height: 50px;">高单元格</td>
    <td>普通单元格</td>
  </tr>
</table>

实际应用中的注意事项

边框和内边距的影响

边框和内边距会占用额外空间，需通过box-sizing调整：

<style>
  .border-box-table {
    width: 300px;
    border: 2px solid #000;
    padding: 10px;
    box-sizing: border-box;
  }
</style>
<table class="border-box-table">
  <tr>
    <td>内容</td>
  </tr>
</table>

表格布局算法

通过table-layout属性可以改变宽度计算方式。fixed模式优先遵循设定值，auto模式根据内容自动调整：

<style>
  .fixed-layout {
    table-layout: fixed;
    width: 300px;
  }
</style>
<table class="fixed-layout" border="1">
  <tr>
    <td>固定宽度列</td>
    <td>另一列</td>
  </tr>
</table>

高级技巧与兼容性问题

使用CSS变量动态调整

结合CSS变量实现动态尺寸：

<style>
  :root {
    --table-width: 600px;
  }
  .dynamic-table {
    width: var(--table-width);
  }
</style>
<table class="dynamic-table" border="1">
  <tr>
    <td>动态宽度表格</td>
  </tr>
</table>

跨浏览器兼容性

部分旧版浏览器对百分比高度的解析存在差异，建议增加备用方案：

<style>
  .compatible-table {
    width: 100%;
    height: 200px;
    height: calc(100vh - 100px);
  }
</style>