CODEWITHSUNDEEP
htmltwitter-bootstrap
Pratiksha Kale
Pratiksha Kale

Reputation: 304

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

Upvotes: 4

Views: 4821

Answers (3)

HighWayDog
HighWayDog

Reputation: 11

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

Upvotes: 1

Jishnu V S
Jishnu V S

Reputation: 8409

I have fix this issue with float:left , check with this snippet

   * { box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; }
table {
   width: 100%;
   max-width: 100%;
   margin-bottom: 20px;
   border: solid 1px #000;
   border-collapse: collapse;
   float:left;
}
thead {
   float: left;
}
tbody tr {
   border: 2px solid #256ac4;
   float: left;
   margin-bottom: 15px;
   width: 100%;
}
td {
   color: #8d9097;
   vertical-align: top;
   font-size: 14px;
}
th {
   text-align: left
}
<body>
<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>

Upvotes: 0

vishnuk
vishnuk

Reputation: 79

In the parent table, try setting

border-collapse:separate; 
border-spacing:5em;

Try to refer this .

Upvotes: 1

Related Questions