Question

我使用以下代码执行colspan操作，我想在colspan之后消除第二个，但是第二个是通过拉伸边界出现。

＆＃13;

<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
     <td colspan="2">Sum: $180</td>
     <td>Should Not Display</td>
  </tr>
</table>
 
</body>
</html>

＆＃13;

Answer 1

只需删除<td>Should Not Display</td>

即可

<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>
 
</body>

Answer 2

要模拟td[colspan="2"]与最后td重叠，您可以使用position

示例：

table {
  position: relative;
}

td[colspan="2"] {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 1;
  background: white;
}

<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <table>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td colspan="2">Sum: $180</td>
      <td>Should Not Display</td>
    </tr>
  </table>

</body>

如何使相邻的

2 个答案: