我创建了一个表格，我希望用户能够在其中提供输入。 Now when a td is selected/focused i want to turn the border around it in a color.我已经尝试过了，但是当我这样做时，它会在输入字段和 td 之间留下一个细小的间隙，即使我已将填充设置为 0。
@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>我希望有人能帮助我。
最佳答案
只需将 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。但由于它的 child 是一个输入，该输入将窃取 焦点，永远不会传播到 TD。
关于html - 如何在表格中的输入 td 上创建边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53979085/