css样式表中如何设置table的第一列的宽度是固定值。页面中有很多table纵向排列

Posted 2023-04-09

参考技术A table

table-layout:fixed;

table
tr
td:first-child,table
tr
td:first-child
width:120px;

你只要把首行
第一个td定宽
同列的宽度都会和他一样.
你要注意的是
第一行
第一个用的是
td
还是
th
楼下的
你测试过吗
就敢说可能有问题.

用于 html 表格的 css，根据其内容自动设置一列的宽度，而其他所有列的宽度相同

【中文标题】用于 html 表格的 css，根据其内容自动设置一列的宽度，而其他所有列的宽度相同

【英文标题】：css for html table, to have one column's width automatic based on its content and all others equal

【发布时间】：2022-01-21 17:19:04

【问题描述】：

我需要将使用 CSS 网格创建的表结构迁移到 html <table> 结构。

CSS 网格布局是

grid-template-columns: auto 1fr 1fr 1fr

如何使用 HTML 表格元素以及适当的 table、tr、td 等 CSS 实现相同的结果？

【参考方案1】：

grid-template-columns 将应用于每个添加的 <tr> 和 table, tbody, td display: block。只要每个<tr> 最多有4 个<td>，或者只有一个<tr> 包含所有<td>，这应该可以工作。以下是这两种表结构的示例。请注意<tbody> 的存在是隐含的，因为如果<table> 不在HTML 中，浏览器会在其中插入一个。

table,
tbody,
td 
  display: block;


.grid 
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr 1fr 1fr;



/* Not Required */

.A 
  background: tomato;


.B 
  background: yellow;


.C 
  background: cyan;


.D 
  background: lime;

<!-- Original Grid Structure 4x3 -->
<div class='grid'>
  <div class='A'>A</div>
  <div class='B'>B</div>
  <div class='C'>C</div>
  <div class='D'>D</div>
  <div class='A'>A</div>
  <div class='B'>B</div>
  <div class='C'>C</div>
  <div class='D'>D</div>
  <div class='A'>A</div>
  <div class='B'>B</div>
  <div class='C'>C</div>
  <div class='D'>D</div>
</div>
<hr>
<!-- Traditional Table Structure 4x3 -->
<table>
  <tbody>
    <tr class='grid'>
      <td class='A'>A</td>
      <td class='B'>B</td>
      <td class='C'>C</td>
      <td class='D'>D</td>
    </tr>
    <tr class='grid'>
      <td class='A'>A</td>
      <td class='B'>B</td>
      <td class='C'>C</td>
      <td class='D'>D</td>
    </tr>
    <tr class='grid'>
      <td class='A'>A</td>
      <td class='B'>B</td>
      <td class='C'>C</td>
      <td class='D'>D</td>
    </tr>
  </tbody>
</table>
<hr>
<!-- Table Structure 12x1 -->
<table>
  <tbody>
    <tr class='grid'>
      <td class='A'>A</td>
      <td class='B'>B</td>
      <td class='C'>C</td>
      <td class='D'>D</td>
      <td class='A'>A</td>
      <td class='B'>B</td>
      <td class='C'>C</td>
      <td class='D'>D</td>
      <td class='A'>A</td>
      <td class='B'>B</td>
      <td class='C'>C</td>
      <td class='D'>D</td>
    </tr>
  </tbody>
</table>

【讨论】：

不幸的是，在“传统表格结构”解决方案中，每一行都是一个独立的网格，因此根据每行中第一个 td 的内容，列宽会有所不同。

@user2520818 第二个表可以在视觉上工作，但不是semantically。