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）。

请看下面的代码段：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

希望这有帮助！

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

1 个答案: