创建带自定义列宽的HTML表格 现有CSS无法设置列宽求助

存在的问题 #

• 语法错误1：原生CSS不支持//格式的单行注释，你代码中所有//开头的注释会导致后续对应区块的样式规则失效，需替换为/* 注释内容 */的标准块注释格式。
• 语法错误2：getColor()不是原生CSS内置函数，如果你没有使用Sass/Less等CSS预处理器自定义该函数，所有调用该函数的属性都会失效，需替换为实际的十六进制/RGB颜色值。
• 列宽不生效核心原因：你的表格默认使用table-layout: auto布局模式，该模式下浏览器会根据单元格内容自动分配列宽，手动设置的列宽属性会被覆盖。

修复后的CSS代码 #

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    width: 100%;
    /* 新增：开启固定布局模式，自定义列宽才会生效 */
    table-layout: fixed;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
    /* 替换为实际的主题蓝色值，此处为示例 */
    background-color: #165DFF;
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
    /* 新增：内容超出列宽时自动换行，避免撑破布局 */
    word-wrap: break-word;
}
/* lineas de cada registro */
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

/* Filas obscuras */
.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
    color: #165DFF;
}
/* Fin de la tabla linea  */
.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #165DFF;
}
/* Clase activa */
.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #165DFF;
}

自定义列宽使用方法 #

修复后直接给表头的<th>元素设置宽度即可，示例如下：

<table class="styled-table">
  <thead>
    <tr>
      <!-- 第一列固定占比20% -->
      <th style="width: 20%">序号</th>
      <!-- 第二列固定占比50% -->
      <th style="width: 50%">内容名称</th>
      <!-- 剩余宽度自动分配给第三列 -->
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格主体内容 -->
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者M_O_o