将内联边框样式应用于表单元格，因为其中包含文本输入

Question

我需要在表中的某些<td>元素上应用样式，以将其显示为这些单元格中有文本输入。 到现在为止，我在单元格中添加了一个额外的<div>或<span> ，然后我对它们应用了一些边框，边距，填充样式。 但是由于我使用的是第三方网格组件（kendo ui） ，所以这种方法会在浏览器上引起一些性能问题。 因此，我需要直接将样式应用于cell元素（ <td>元素），而不在其中添加任何其他元素。

我可以简单地给<td>元素添加边框样式。 但是问题是，我需要内嵌3px或5px的边框。 否则，它看起来就像我的网格上有表格边框，而且看起来也不像输入。

如何将内联边框（如3px填充）应用于特定的<td>元素？ 没有javascript可能吗？

这是我当前拥有的屏幕截图。我需要此显示，单元格中没有元素：

Answer 1

您可以做到这一点，只需将CSS样式添加到td元素

https://jsfiddle.net/kokilajs/0v0hyt4t/1/

html

 <table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 

CSS风格

  td{
    background-color:#DDD;
    margin:3px;
    padding-left:10px;
    border-style: solid;
    border-width:1px;
    border-color: #AAA;
    border-radius:5px;
}
td:hover{
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}