如何在不使用HTML表格的情况下生成具有自动列宽的表格？

我有一个很大的表，我正试图添加一些悬停效果，发现CSS表相对来说是不灵活的，所以我想尝试用其他方式实现（见下面的背景）

我认为CSS网格可能会工作。如何使用CSS网格创建CSS表？我需要自动调整列宽（当然也需要在行之间同步），就像在常规CSS表中一样，并且（我认为）我需要每一行都是其单元格的父元素，就像在表中一样

我读到CSS网格的2级规范包含一个子网格，但是我找不到使用子网格复制基本表功能的示例。似乎大多数浏览器还没有实现子网格，所以

display:contents

可能是一种替代方案

背景以备不时之需：我正在尝试实现一种操作栏悬停覆盖，如Gmail：当您将光标悬停在行/电子邮件上时，行的右侧会出现一个覆盖，其中包含可以对行/电子邮件执行的各种操作，例如移动到文件夹、删除。Gmail将表格行显示为弹性框以实现这一点，但这意味着列宽必须“手动”设置。在我的例子中，我有一个包含各种数据的海量表格，手动设置列宽是不可行的

更新：它看起来像什么？这是一个包含行和列的普通表。你以前肯定见过这样的事情。我在问一个一般性的问题，而这张桌子的细节与此无关

以下是Gmail的屏幕截图，fwiw：

---

您可以使用每行的最后一个单元格来保存动作图标。然后在

tr:hover

*{
框大小：边框框；
}
身体{
字体系列：“Segoe用户界面”
}
桌子{
宽度：100%；
边界塌陷：塌陷；
}
表td，
表th{
填充物：5em 1em；
文本对齐：左对齐；
}
表th{
边框底部：1px实心#999；
}
表tr td：最后一个孩子{
位置：相对位置；
空白：nowrap；
}
.世界其他地区行动{
位置：绝对位置；
显示：无；
右：1em；
最高：50%；
转化：translateY（-50%）；
背景色：#F4；
填充：0.25em 0.5em；
}
tr：悬停。行操作{
显示：块；
}
i:不是（最后一个孩子）{
右边距：1em；

名称
地址
接触
名称
地址
接触
名称
地址
接触
名称
地址
接触
名称
地址
接触
名称
地址
接触

您可以使用每行的最后一个单元格来保存动作图标。然后将它们显示在

tr:hover

*{
框大小：边框框；
}
身体{
字体系列：“Segoe用户界面”
}
桌子{
宽度：100%；
边界塌陷：塌陷；
}
表td，
表th{
填充物：5em 1em；
文本对齐：左对齐；
}
表th{
边框底部：1px实心#999；
}
表tr td：最后一个孩子{
位置：相对位置；
空白：nowrap；
}
.世界其他地区行动{
位置：绝对位置；
显示：无；
右：1em；
最高：50%；
转化：translateY（-50%）；
背景色：#F4；
填充：0.25em 0.5em；
}
tr：悬停。行操作{
显示：块；
}
i:不是（最后一个孩子）{
右边距：1em；

名称
地址
接触
名称
地址
接触
名称
地址
接触
名称
地址
接触
名称
地址
接触
名称
地址
接触

仅展示如何以“灵活”的方式使用

。当然，您可以更改

元素中的表和表相关元素。在两种解决方案中都使用表结构

css是跨浏览器的，适用于智能手机、平板电脑、台式机和其他设备

<div class="tbl">   or   <div class="tbl">
  <table>                  <div class="table">
    <tr>                     <div class="tr">
      ...                      ...
    </tr>                    </div>
  </table>                 </div>
</div>                   </div>

示例在下面，您可以找到包含3个灵活列的表的额外css，其中每列的宽度不同

请注意，所有列的总和为100%

tr th:nth-child(1), tr td:nth-child(1) {
  flex: 0 0 22%;
  max-width: 22%;
}
tr th:nth-child(2), tr td:nth-child(2) {
  flex: 0 0 46%;
  max-width: 46%;
}
tr th:nth-child(3), tr td:nth-child(3) {
  flex: 0 0 32%;
  max-width: 32%;
}

---

只是为了说明如何以“灵活”的方式使用

。当然，您可以在

元素中更改表和表相关元素。在这两种解决方案中都使用表结构

css是跨浏览器的，适用于智能手机、平板电脑、台式机和其他设备

<div class="tbl">   or   <div class="tbl">
  <table>                  <div class="table">
    <tr>                     <div class="tr">
      ...                      ...
    </tr>                    </div>
  </table>                 </div>
</div>                   </div>

示例在下面，您可以找到包含3个灵活列的表的额外css，其中每列的宽度不同

请注意，所有列的总和为100%

tr th:nth-child(1), tr td:nth-child(1) {
  flex: 0 0 22%;
  max-width: 22%;
}
tr th:nth-child(2), tr td:nth-child(2) {
  flex: 0 0 46%;
  max-width: 46%;
}
tr th:nth-child(3), tr td:nth-child(3) {
  flex: 0 0 32%;
  max-width: 32%;
}

---

使用css网格的

repeat

功能，您可以根据网格中的内容自动创建列。我在最后一列上添加了绝对位置，使其与行重叠

.row{
显示：网格；
网格模板列：重复（自动拟合，最小值（100px，最大内容））；
边框底部：1px实心#999；
填充：10px；
栅极间隙：15px；
光标：指针；
对齐项目：居中；
位置：相对位置；
背景：#fff；
}
.行span.操作{
显示：无；
位置：绝对位置；
右：0；
填充：10px；
背景：#fff；
}
我{
填充：0 3px；
}
.row：悬停span.action{
显示：init