Question

*请注意，这个问题基本上已经从之前的版本进行了彻底检查，以便更加精确。因此，下面的一些答案并不完全是重构的问题。

我有两组数据需要显示表格。由于两组数据都需要具有列宽（但仍然是动态的），我使用了两个<tbody>。

我正在尝试为每个制表数据设置标题，其方式是标题占据整个 <tbody> 的宽度。

我尝试过使用table-caption，但它不适用于tbody，而是table本身。这意味着所有字幕都会显示在表格的顶部，无论它们在html中的位置。

要演示我遇到的内容，请参阅以下代码段：

＆＃13;

table {
  width: 100%;
  border-collapse: collapse;
  color: black;
  margin-bottom: 2px;
}
tbody:before {
  display: table-caption;
  font-size: 1.25em;
  padding: 16px;
  background-color: #303030;
  font-weight: bold;
  color: white;
  width: 100%;
}
#tbody1:before {
  content: 'tbody1';
}
#tbody2:before {
  content: 'tbody2';
}
th,
td {
  padding: 4px 0px;
  border: 1px solid black;
}
caption {
  border: 1px dotted black;
}

＆＃13;

<table>
  <tbody id="tbody1">
    <caption>Caption1</caption>
    <tr>
      <th>bob</th>
      <th>dob</th>
    </tr>
  </tbody>
  <tbody id="tbody2">
    <caption>Caption2</caption>
    <tr>
      <th>dob</th>
      <th>bob</th>
    </tr>
  </tbody>
</table>

＆＃13;

我目前的尝试是使用:before。但正如您所看到的，:before并未占据tbody的整个宽度。即使使用width: 100%，它也无效。

我意识到可以做到的另一种方法是为每个tbody添加另一行，并将colspan设置为等于该表的列数。像这样：

＆＃13;

table {
  width: 100%;
  border-collapse: collapse;
  color: black;
  margin-bottom: 2px;
}
th,
td {
  padding: 4px 0px;
  border: 1px solid black;
}
caption {
  border: 1px dotted black;
}

＆＃13;

<table>
  <tbody id="tbody1">
    <tr>
      <th colspan="2">Title1</th>
    </tr>
    <tr>
      <th>bob</th>
      <th>dob</th>
    </tr>
  </tbody>
  <tbody id="tbody2">
    <tr>
      <th colspan="2">Title2</th>
    </tr>
    <tr>
      <th>dob</th>
      <th>bob</th>
    </tr>
  </tbody>
</table>

＆＃13;

但是，唯一的问题是它不会变得动态，需要您知道提前有多少列。通常情况下这不是问题，但我正在寻找一个更有活力的解决方案。

我的问题是：如何以某种方式向 caption （而不是tbody）添加table以便每个标题与适用的tbody和不是表格
相关

CSS - 适用于每个tbody的表格标题

0 个答案: