仅在一个单元格中完全删除两个 td 之间的表格边框[重复]

Question

在一个大型 HTML 表格中，我有一个由两个相邻单元格组成的输入部分。第一个是右对齐的井号，下一个是输入单元格（表示这部分正在输入金额）。

我希望“双单元格”具有红色背景，但似乎无法删除它们之间的白色边界线。作为比较，如果您通过 colspan 连接两个单元格，您显然不会得到任何分离，我想为输入单元格组合创建相同的效果。

请注意，我确实希望该表中其他任何地方都有边框，而不是在这些单元格之间。

<table>
  <tr>
    <td style="background-color:red;text-align:right;padding-right:0;border-width: 1px 0 1px 1px;border-spacing:0px;">&pound;</td>
    <td style="background-color:red;padding-left:0;border-width: 1px 1px 1px 0;border-spacing:0px;">
      <input type="text" style="background-color:red" value="0">
    </td>
  </tr>
  <tr>
    <td style="background-color:green" colspan="2">no line</td>
  </tr>
</table>

Answer 1

删除<input> 和pound 符号之间的边框，使用伪:before 并制作相同颜色的假边框（在您的情况下为red）。

看看下面的sn-p：

.pound-sign {
  background-color:red;
  text-align:right;
  padding-right:0;
  border-width: 1px 0 1px 1px;
  border-spacing:0px;
}

.input-holder {
  position: relative;
  background-color:red;
  padding-left:0;
  border-spacing:0px;
}

.input-holder:before {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  width: 3px;
  height: 100%;
  background: red;
}

.input-holder input {
  background-color:red;
  border: 1px solid #fff;
}

.green {
  background-color:green;
}

<table>
  <tr>
    <td class="pound-sign" style="">&pound;</td>
    <td class="input-holder">
      <input type="text" value="0">
    </td>
  </tr>
  <tr>
    <td class="green" colspan="2">no line</td>
  </tr>
</table>

希望这会有所帮助！