Pratiksha Kale Pratiksha Kale - 2 years ago 82
HTML Question

How to add space between two rows with border in bootstrap table



table{ width: 100%;max-width: 100%; margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;}

tbody tr{border:2px solid #256ac4;}
td{ color: #8d9097; vertical-align: top; font-size: 14px;}
th{text-align:left}

<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>

</tbody>

</table>





i have coded this, expected result is in image but i am unable to add space between two rows, if i use border-collapse:seperate then space is coming but border is not applying.

https://ibb.co/b9WDn5

Answer Source

You should add a div where your content goes and style it to create the gap between rows.

So if we take the code from you example it will turn out like this.

HTML

<table>
  <thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
      <td>
        <div>AA</div>
      </td>
    </tr>

  </tbody>

</table>

CSS

table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}

td {
  color: #8d9097;
  vertical-align: top;
  font-size: 14px;
  padding: 0;
}

td div {
  margin-bottom: 10px;
  border: 2px solid #256ac4;
}

td:first-child div {
  border-left-width: 2px;
}

td:last-child div {
  border-right-width: 2px;
}

thead {
  border: solid 1px #000;
}

th {
  text-align: left
}

https://jsfiddle.net/nvbza1u3/1/

Note how the border was added to the div and not the tr. Also I added the border to thead to make it look more like your example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download