顶部和底部边框

Question

我这里有一些代码，这给了我一个底部边框，如何添加它以使其显示顶部和底部边框？

＆＃13;

＆＃13;

table.bottomBorder {
  border-collapse: collapse;
}

table.bottomBorder td,
table.bottomBorder th {
  border-bottom: 1px solid lightgrey;
  padding: 10px;
  text-align: center;
}

＆＃13;

<table class="bottomBorder">
  <tr>
    <th>Table Header</th>
    <th>Table Header</th>
  </tr>
  <tr>
    <td>Table cell</td>
    <td>Table cell</td>
  </tr>
  <tr>
    <td>Table cell</td>
    <td>Table cell</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

table.bottomBorder th {
  border-bottom: 1px solid lightgrey;
  border-top: 1px solid lightgrey;
  padding: 10px;
  text-align: center;
}

在此处详细了解边框：http://www.cssbasics.com/chapter_13_css_borders.html

Answer 2

border-bottom: 1px solid lightgrey;
border-top: 1px solid lightgrey;

这将指定一个顶部边框和一个底部边框并保留两者，它们不会相互覆盖或任何其他内容。

Answer 3

您错过了th border属性，添加了以下css部分

table.bottomBorder tr th {
  text-align: center; /* If you need */
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 10px;
}

＆＃13;

＆＃13;

table.bottomBorder {
  border-collapse: collapse;
}

table.bottomBorder td,
table.bottomBorder th {
  border-bottom: 1px solid lightgrey;
  padding: 10px;
  text-align: center;
}

table.bottomBorder tr th {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

＆＃13;

<table class="bottomBorder">
  <tr>
    <th>Table Header</th>
    <th>Table Header</th>
  </tr>
  <tr>
    <td>Table cell</td>
    <td>Table cell</td>
  </tr>
  <tr>
    <td>Table cell</td>
    <td>Table cell</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;