BOOTSTRAP table borders for one column code example
Example 1: bootstrap table
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Example 2: bootstrap break table row
I have this :
| 1 | 2 | 3 | 4 |
I want this :
| 1 | 2 | 3 |
| 4 |
- HTML :
<tr>
<th scope="row">1</th>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
- CSS :
td:nth-child(4) {
display: block;
width: 100%;
}
th,
td:nth-child(2),
td:nth-child(3) {
display: inline-block;
width: 33%;
}