如何将 table 行重叠在另一行之上？

Question

这只是采用内容宽度，我需要的是整个“重叠此”行移动到前一行的顶部并使用其前身的宽度。关于如何解决这个问题的任何提示？

<table>
  <tbody>
    <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value3</td>
    </tr>
    <tr style="background: azure; position: absolute; display: block, width: 100%; margin-top: -25px">
      <td colspan="3">Overlap this</td>
    </tr>
    <tr>
      <td>ValueA</td>
      <td>ValueB</td>
      <td>ValueC</td>
    </tr>
  </tbody>
</table>

Answer 1

tbody {
  width: 100%;
}

tr {
  width: inherit;
}

<table>
  <tbody style="position:relative">
    <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value3</td>
    </tr>
    <tr style="background: azure; position: absolute; display: block; top:0 ">
      <td colspan="3">Overlap this</td>
    </tr>
    <tr>
      <td>ValueA</td>
      <td>ValueB</td>
      <td>ValueC</td>
    </tr>
  </tbody>
</table>

Answer 2

在你的样式列表中你有一个小错误。相反 , 你需要分号 ; 之后： ...display: block, <-- small bug :-) ... <tr style="background: azure; position: absolute; display: block; width: 100%; margin-top: -25px">

.ovl {  
  background: azure; 
  position: absolute; 
  display: block;
  width: 100%; margin-top: -25px  
}

tbody {
  position: relative;  
}

<table>
  <tbody>
    <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value33</td>
    </tr>
    <tr class="ovl">
      <td colspan="3" >Overlap this</td>
    </tr>
    <tr>
      <td>ValueA</td>
      <td>ValueB</td>
      <td>ValueC</td>
    </tr>
  </tbody>
</table>

Answer 3

table tbody {
  position: relative;
}

table tbody tr:nth-child(2) {
  background: azure;
  position: absolute;
  display: block;
  width: 100%;
  margin-top: -25px;
}

<table>
  <tbody>
    <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value3</td>
    </tr>
    <tr>
      <td colspan="3">Overlap this</td>
    </tr>
    <tr>
      <td>ValueA</td>
      <td>ValueB</td>
      <td>ValueC</td>
    </tr>
  </tbody>
</table>

Answer 4

设置 table 数据 <td> 标签的样式，而不是 table 行 <tr>。检查下面的代码。

<table>
  <tbody>
    <tr style="background: azure; position: absolute; display: block;">
      <td colspan="3" style="width: 150px;">Overlap this</td>
    </tr>
    <tr>
      <td>Value1</td>
      <td>Value2</td>
      <td>Value3</td>
    </tr>
    <tr>
      <td>ValueA</td>
      <td>ValueB</td>
      <td>ValueC</td>
    </tr>
  </tbody>
</table>

如何将 table 行重叠在另一行之上？

How can I overlap a table row over another?

html

css

html-table