Question

我创建了一个表，希望用户可以在其中进行输入。现在，当选择/聚焦td时，我想将其周围的边框变成一种颜色。我已经尝试过了，但是当我这样做的时候，即使我将padding设置为0，它也会在inputfield和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添加到:focus的输入中。
框阴影将与父TD的灰色边框重叠，以提供所需的效果。
由于框阴影不会触发重排，因此还可以防止移动（大约2像素）。它只是绘画。

@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只有将:focus设置为属性，才能获得tabindex。但是由于它是孩子的输入，所以该输入将窃取focus，从不传播到TD。

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

1 个答案: