如何在 table 中的输入 td 上创建边框？

Question

我创建了一个 table，我希望用户能够在其中提供输入。现在，当 td 为 selected/focused 时，我想将其周围的边框变成一种颜色。我已经尝试过了，但是当我这样做时，即使我将填充设置为 0，它也会在输入字段和 td 之间留下一个细小的间隙。

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
body {
  font-family: "Lato", sans-serif;
}

input {
  width: 120px;
  height: 20px;
  border: 1px;
  padding: 5px;
  outline: none;
}

input:focus {}

table {
  margin: 50px;
  font-weight: 400;
  border-collapse: collapse;
}

th {
  font-size: 20px;
}

td:focus {
  border: 1.5px solid orange;
}

td,
th {
  font-weight: 900;
  width: 120px;
  border: 1px solid #dddddd;
  text-align: left;
  padding: 0;
}

<body>

  <table>
    <tr>
      <th>Income</th>
      <th>Outgoings</th>
      <th>Taxes</th>
      <th>Total</th>
    </tr>

    <tr>
      <td><input type="text" placeholder="CHF"></td>
      <td><input type="text" placeholder="CHF"></td>
      <td><input type="text" placeholder="CHF"></td>
      <td><input type="text" placeholder="CHF"></td>
    </tr>

我希望有人能帮助我。

Answer 1

只需将 box-shadow 添加到 :focused 输入。
方框阴影将与 parent TD 的灰色边框重叠，从而提供所需的效果。
它还可以防止移动东西（2px 左右），因为 box-shadow 不会触发重排。它只是绘画。

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
body {
  font-family: "Lato", sans-serif;
}

input {
  width: 120px;
  height: 20px;
  border: 1px;
  padding: 5px;
  outline: none;
}

input:focus {
  box-shadow:  0 0 0 1px orange;
}

table {
  margin: 50px;
  font-weight: 400;
  border-collapse: collapse;
}

th {
  font-size: 20px;
}

td,
th {
  font-weight: 900;
  width: 120px;
  border: 1px solid #dddddd;
  padding: 0;
}

<table>
  <tr>
    <th>Income</th>
    <th>Outgoings</th>
    <th>Taxes</th>
    <th>Total</th>
  </tr>

  <tr>
    <td><input type="text" placeholder="CHF"></td>
    <td><input type="text" placeholder="CHF"></td>
    <td><input type="text" placeholder="CHF"></td>
    <td><input type="text" placeholder="CHF"></td>
  </tr>
</table>

TD只有给它设置tabindex 属性才能得到:focus。但由于它的 child 是一个输入，该输入将窃取 focus，永远不会传播到 TD。

如何在 table 中的输入 td 上创建边框？

How to create Border on a input td in a table?

html

css

html-table

border