Question

我对我的桌子有一个奇怪的问题。我想将border添加到我的rows，以便用户知道每个rows ..

之间的差异

我的HTML

<table>
  <tr class='rows'>
    <td class='test'> test1</td>
    <td class='test'> test2</td>
    <td class='test'> test3</td>
  </tr>
  <tr class='rows'>
    <td class='test'> test8</td>
    <td class='test'> test9</td>
    <td class='test'> test7</td>
  </tr>
  <tr class='rows'>
    <td class='test'> test4</td>
    <td class='test'> test5</td>
    <td class='test'> test6</td>
  </tr>

   more...
</table>

我的表css

table{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}

.rows{
  border: solid 5px red;  //this border properties doesn't work.
  background-color:grey;  //this would change the background colors
}

我无法弄清楚我的代码出了什么问题。任何人都可以帮我吗？非常感谢！

Answer 1

除非您更改display属性，否则无法将边框应用于表格行。建议的解决方案是在表格单元格上设置边框：

table {
  border-collapse: collapse;
  border-spacing: 0;
}

table td {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}

如果表格单元格之间需要空格，则可以使用padding。

Answer 2

只需删除

即可

display:table;

在你的css ..

Look at this jsfiddle...

向表格单元格问题添加边框

2 个答案: