CODEWITHSUNDEEP
html
phoine
phoine

Reputation: 125

how to give space between table rows

I have table with zebre-strip and I want to give 1cm space between two rows. This is my example : http://jsfiddle.net/6q3r8bj9/6/ 

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

Upvotes: 0

Views: 87

Answers (1)

Gobbin
Gobbin

Reputation: 530

I think this is what you want. Change the 5px in border-spacing to the values you desire. 

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

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

tr:nth-child(even) {
  background: #f49541;
}
<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>

Upvotes: 3

Related Questions