如何在表格中的输入 td 上创建边框？答案

【问题标题】：How to create Border on a input td in a table?如何在表格中的输入 td 上创建边框？
【发布时间】：2019-05-27 11:49:01
【问题描述】：

我创建了一个表，我希望用户能够在其中提供输入。 Now when a td is selected/focused i want to turn the border around it in a color.我已经尝试过了，但是当我这样做时，即使我将填充设置为 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>

我希望有人可以帮助我。

【问题讨论】：

input:focus {} 是什么意思？
1.5px solid orange...1.5 px 像 1 px 和其他一半？
你试过input:focus {box-shadow: 0 0 0 1px orange;}吗？
你可以使用<td contenteditable="true">而不是输入元素
@enxaneta contenteditable 是一个野兽，它可以多行、添加标签、粗体、斜体、制作咖啡和其他不需要的东西。

标签： html css html-table border

【解决方案1】：

只需将box-shadow 添加到:focused 输入即可。
框阴影将与父 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>

只有在您为其设置tabindex 属性时，TD 才能获取:focus。但由于它的孩子是一个输入，该输入将窃取focus，永远不会传播到TD。

【讨论】：

谢谢。工作。
但是你能解释一下为什么它不能与边框一起使用吗？为什么它适用于 box-shadow？
@Predecitedq 不客气。添加了一行信息...如果有帮助的话。
父元素是封装子元素的任何元素。在您的情况下，INPUT 是 TD 的孩子。 TD是它的父母。另外，Sølve Tornøe 所说的。您无法通过 TD 来获取 :focus，因为从逻辑上讲，INPUT 首先得到了它，而 TD 没有设置 tabindex 属性。
@Predecitedq 因为 px 是物理屏幕像素的单位，使用整数，而不是浮点数。您将始终获得所需的跨浏览器结果。