将内联边框样式应用于表格单元格，因为内部有文本输入

Question

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

  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;
}