为什么TR不采取风格?

时间:2010-04-08 05:05:53

标签: css xhtml

CSS

table tr {border-bottom:1px solid #008999}

HTML

<table width="100%" cellspacing="0" cellpadding="0">
   <thead>
      <tr>
         <th scope="col">one</th>
         <th scope="col">two</th>
         <th scope="col">three</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">Hello</th>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
   </tbody>
</table>

3 个答案:

答案 0 :(得分:46)

添加:

table
{
    border-collapse: collapse;
}

否则tr creates no single block

简单示例:

table
{
  border: 5px solid #900;
  background: #fff;
}
tr
{
  border: 5px solid #090;
}
td
{
  background: #ccc;
  padding: 5px 0;
}

table + table
{
  border-collapse: collapse;
}
<table>
  <tr>
    <td>def</td>
    <td>ault</td>
  </tr>
</table>
<table>
  <tr>
    <td>coll</td>
    <td>apse</td>
  </tr>
</table>

答案 1 :(得分:8)

尝试给予

table tr th {border-bottom:1px solid #008999}

然后你可以使用

table { border-collapse: collapse; }
table tr {border-bottom:1px solid #008999; }

参见 The collapsing border model

答案 2 :(得分:3)

根据定义,

tr不会采用边框样式。您需要将其应用于其中的td:

table tr td {border-bottom:1px solid #008999}