如何在表格上设置边框答案

【问题标题】：How to set border on tables如何在表格上设置边框
【发布时间】：2017-01-19 05:26:28
【问题描述】：

假设我有一个包含大量数据的 table 元素。

table {
  background-color: skyblue;
  width: 100%;
  margin: auto;
  text-align: center;
}

<table>
  <tbody>
    <tr>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
    </tr>
    <tr>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
    </tr>
    <tr>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
    </tr>
    <tr>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
    </tr>
    <tr>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
    </tr>
    <tr>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
      <td>My Name</td>
    </tr>
  </tbody>
</table>

在每个偶数td 上设置border-style: dashed; border-color: black; border-size: 3px; 边框的最佳方法是什么。

请解释一下。

【问题讨论】：

标签： html css html-table css-tables

【解决方案1】：

你可以试试：

td:nth-child(even) {
   border-style: dashed; 
   border-color: black; 
   border-size: 3px;
}

【讨论】：

我的答案的不错选择，如果不是更好的话。 +1 点赞。
@Om Mandarwan 这是一个工作的JSFiddle。 nth-child 选择器是 CSS3 中的新功能，因此它不适用于某些较旧的浏览器，尤其是 IE8 和更早版本。