Twitter Bootstrap table width full width but content centered
17,274
Solution 1
I have shown only two rows (tr
). You can add as many rows as you want.
HTML:
<table class="table table-hover">
<tbody>
<tr>
<td> </td>
<td>Head1</td>
<td>content1</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Head2</td>
<td>content2</td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
table.table.table-hover{ width:100%; }
table.table.table-hover tr td{ width:25% }
Hope you will find this useful :)
Solution 2
Here is the code you can try this let me know if you have any issue css
.wid50{width:50%;}
<table class="table table-hover" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="wid50">Head1</td>
<td class="wid50">content1.1</td>
</tr>
<tr>
<td> </td>
<td>content1.2</td>
</tr>
<tr>
<td> </td>
<td>content1.3</td>
</tr>
<tr>
<td>Head2</td>
<td>content2</td>
</tr>
<tr>
<td>Head3</td>
<td>content3</td>
</tr>
</tbody>
</table>
Solution 3
Please check this also according to your image
<table class="table table-hover" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="wid2"> </td>
<td class="wid1">Head1</td>
<td class="wid1">content1.1</td>
<td class="wid2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>content1.2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>content1.3</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Head2</td>
<td>content2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Head3</td>
<td>content3</td>
<td> </td>
</tr>
</tbody>
</table>
and this is css
table.table tr td{border-bottom:1px solid #000;}
.wid1{width:20%;}
.wid2{width:30%;}
Author by
zoma
Updated on June 15, 2022Comments
-
zoma almost 2 years
I have a table like this (included bootstrap):
<table class="table table-hover"> <tbody> <tr><td>Head1</td><td>content1.1</td></tr> <tr><td></td><td>content1.2</td></tr> <tr><td></td><td>content1.3</td></tr> <tr><td>Head2</td><td>content2</td></tr> <tr><td>Head3</td><td>content3</td></tr> </tbody> </table>
I want the table lines over the full width of it's container but the two cells with header and content should be centered.. I've tried to describe it in an image:
I cant upload the image here, so I've done it somewhere else: