如何设置边框元素?

时间:2013-09-24 19:06:42

标签: html css html-table

为什么边框不显示在tbody左右?我尝试rules="groups"并显示边框,但只在两个tbody部分之间展开,然后折叠了。

table.sectioned tbody {
  border: 2px solid black;
  border-collapse: separate;
  border-spacing: 4px;
}
<table class="sectioned">
  <tbody>
    <tr><td colspan="2"><b>General Data</b></td></tr>
    <tr><td>Tail Number</td><td>N0809021</td></tr>
    <tr><td>Type of Ownership</td><td>personal</td></tr>
    <tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr>
    <tr><td>Year of Manufacture</td><td>1999</td></tr>
    <tr><td>Use of Aircraft</td><td>private</td></tr>
    <tr><td>Start Date</td><td></td></tr>
    <tr><td>Policy Length</td><td>6 months</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr>
    <tr><td>Manufacturer</td><td></td></tr>
    <tr><td>Model</td><td></td></tr>
    <tr><td>Engine Make</td><td></td></tr>
    <tr><td>Number of Seats</td><td></td></tr>
  </tbody>
</table>

4 个答案:

答案 0 :(得分:49)

添加:

table {border-collapse: collapse;}

FIDDLE

答案 1 :(得分:6)

添加display:block到你的tbody风格。试试这个

tbody{
    display:block;
    border: 2px solid black;
    border-collapse: separate;
    border-spacing: 4px; 
}

您可以在此fiddle

上对其进行测试

答案 2 :(得分:3)

使用box-shadow代替border。无论应用border-collapse的哪个值,它都有效。此外,您还可以将border-radius应用于此。

&#13;
&#13;
tbody {
  box-shadow: 0 0 0 1px black;
  border-radius: 5px;
}
&#13;
<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

.table_body, .tbody_td, .tbody_th 
{ border: 1px solid black; }
.table_body  { border-collapse: collapse; }
<table>
<thead> 
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<td class="tbody_td">Jill</td>
<td class="tbody_td">Smith</td>
</tr>
<tr>
<td class="tbody_td">Eve</td>
<td class="tbody_td">Jackson</td>
</tr>
</tbody>
</table>