表列宽处理之道，让你的表格优雅大方

前端

2024-01-04 06:50:04

表格列宽优化指南

前言

表格是网页上组织和展示数据的强大工具。为了增强其可读性和美观度，适当管理表格列宽至关重要。本文将深入探讨 HTML 中表格列宽的设置方法，并分享优化技巧，打造更实用、更赏心悦目的表格。

设置表格列宽的方法

table-layout CSS 属性： 控制表格的布局算法，可以选择固定宽度或自适应宽度。
宽度属性： 直接设置列宽，可使用绝对单位（如像素）或相对单位（如百分比）。
弹性布局： 利用 flex 布局，让元素根据可用空间自动调整大小。
百分比布局： 以父元素的宽度为基准，按百分比设置列宽。
撑满布局： 让元素占据所有可用空间，通过 flex 布局和 flex: 1 实现。

代码示例

设置固定列宽：

<table style="table-layout: fixed;">
  <tr>
    <th width="100px">姓名</th>
    <th>年龄</th>
  </tr>
</table>

设置自适应列宽：

<table style="table-layout: auto;">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
</table>

使用弹性布局：

<div class="table-container">
  <table>
    <tr class="row">
      <td class="col-1">姓名</td>
      <td class="col-2">年龄</td>
    </tr>
  </table>
</div>

使用百分比布局：

<table style="width: 100%;">
  <tr>
    <th style="width: 50%;">姓名</th>
    <th style="width: 50%;">年龄</th>
  </tr>
</table>

使用撑满布局：

<div class="table-container">
  <table>
    <tr class="row">
      <td class="col-1" style="flex: 1;">姓名</td>
      <td class="col-2" style="flex: 1;">年龄</td>
    </tr>
  </table>
</div>