Question

这是我的样式表

<style>
table tr{ border:1px solid #F00 ;  }
table td{ padding:20px; }
</style>

这是一个HTML代码：

<table class="" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>Test</td>
    <td>testing</td>
</tr>
</table>

这是一个实时预览的小提琴链接。 http://jsfiddle.net/Husen/tL7wK/

Answer 1

您需要向td添加边框，例如：

<style>
table td{ padding:20px; border:1px solid #F00 ; }
</style>

DEMO

或者您可以在表格中添加边框：像这样：

table{ border:1px solid #F00 ;  }
table td{ padding:20px; }

DEMO2

如果您只想要行边框效果，可以试试这个：

table td{
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    padding:20px; 
 }

 table{ border:1px solid #F00 ;  }

DEMO3

Answer 2

尝试这样的事情

table td{ border:1px solid #F00 ;padding:20px;  }

Answer 3

删除table s border属性。

将border-collapse: collapse;添加到您的CSS中。这将允许tr：）

的边框

table {
  border-collapse: collapse;
}

table tr {
  border: 1px solid #F00;
  border-top: 1px solid #0F0;
}

table td {
  padding: 20px;
}

<table>
  <tr>
    <td>Test</td>
    <td>testing</td>
  </tr>
</table>

表边框不起作用：表行（tr）使用css不显示边框

3 个答案: