如何固定html表格不同列宽

要固定HTML表格不同列宽，可以使用CSS的table-layout: fixed;属性。然后为每一列设置固定的宽度，col1 { width: 100px; }。

固定HTML表格不同列宽

如何固定html表格不同列宽

小标题1：使用CSS样式固定列宽

可以使用CSS样式来固定HTML表格的不同列宽，通过设置表格的width属性和table-layout属性，可以控制表格的宽度和布局方式。

单元表格1：示例代码

<style>
  table {
    width: 100%;
    table-layout: fixed; /* 固定列宽 */
  }
  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
</style>
<table>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
</table>

小标题2：使用colgroup元素固定列宽

另一种固定HTML表格不同列宽的方法是使用colgroup元素，通过为每一列添加一个colgroup元素，并设置其span属性，可以指定该列的跨度，从而固定列宽。

单元表格2：示例代码

<table>
  <colgroup span="1" style="width: 30%;">
  <colgroup span="1" style="width: 40%;">
  <colgroup span="1" style="width: 30%;">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
</table>