我需要在我的一些 <td>
上应用样式 我表中的元素,以显示它们,因为这些单元格中有文本输入。到现在为止,我一直在放一个额外的 <div>
或 <span>
到单元格中,然后我将一些边框、边距、填充样式应用于这些样式。但由于我使用的是第三方网格组件 (kendo ui),这种方法会导致浏览器出现一些性能问题。因此,我需要将样式直接应用于单元格元素(<td>
元素),内部没有任何额外元素。
我可以简单地给 <td>
一个边框样式 元素。但问题是,我需要内联 3px 或 5px 的那些边框。否则它看起来就像我的网格上只有表格边框,它看起来不像输入。
如何将内嵌边框(如 3px 内边距)应用到特定的 <td>
元素?没有javascript可以吗?
这是我目前拥有的屏幕截图。我需要此显示,但单元格中没有元素:
最佳答案
你可以简单地为 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;
}
关于html - 将内联边框样式应用于表格单元格,因为里面有文本输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29120684/