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

Question

我需要在我的一些 <td> 上应用样式 我表中的元素，以显示它们，因为这些单元格中有文本输入。到现在为止，我一直在放一个额外的 <div> 或 <span> 到单元格中，然后我将一些边框、边距、填充样式应用于这些样式。但由于我使用的是第三方网格组件 (kendo ui)，这种方法会导致浏览器出现一些性能问题。因此，我需要将样式直接应用于单元格元素(<td> 元素)，内部没有任何额外元素。

我可以简单地给 <td> 一个边框样式 元素。但问题是，我需要内联 3px 或 5px 的那些边框。否则它看起来就像我的网格上只有表格边框，它看起来不像输入。

如何将内嵌边框(如 3px 内边距)应用到特定的 <td> 元素？没有javascript可以吗？

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

Answer 1

你可以简单地为 td 元素添加 css 样式

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