如何在表行之间留出空间

Question

我有zebre-strip表，我想在两行之间留出1cm的空间。这是我的例子：http://jsfiddle.net/6q3r8bj9/6/

table {width: 100%;}
tr:nth-child(odd) {
    background: #4286f4;
}
tr:nth-child(even) {
    background: #f49541;
}

Answer 1

我认为这就是你想要的。将5px中的border-spacing更改为您想要的值。

＆＃13;

＆＃13;

table {
  width: 100%;
  border-spacing: 5px 5px;
  border-collapse: separate;
}

tr:nth-child(odd) {
  background: #4286f4;
}

tr:nth-child(even) {
  background: #f49541;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>1</td>
      <td>0</td>
    </tr>
    <tr>
      <td>2</td>
      <td>0</td>
    </tr>
    <tr>
      <td>3</td>
      <td>0</td>
    </tr>
    <tr>
      <td>4</td>
      <td>0</td>
    </tr>
    <tr>
      <td>5</td>
      <td>0</td>
    </tr>
    <tr>
      <td>6</td>
      <td>0</td>
    </tr>
    <tr>
      <td>7</td>
      <td>0</td>
    </tr>
    <tr>
      <td>8</td>
      <td>0</td>
    </tr>
    <tr>
      <td>9</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;