0

我对我的桌子有一个奇怪的问题。我想添加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
}

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

4

2 回答 2

2

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

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

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

如果您需要表格单元格之间的空间，您可以使用padding.

于 2013-01-03T02:08:39.077 回答
1

只需删除

display:table;

在你的 css..

看看这个jsfiddle ...

于 2013-01-03T02:35:49.057 回答