Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap table width full width but content centered

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:

See image for more description

like image 559
zoma Avatar asked Sep 16 '26 07:09

zoma


2 Answers

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>&nbsp;</td>
         <td>Head1</td>
         <td>content1</td>
         <td>&nbsp;</td>
      </tr> 
      <tr>
         <td>&nbsp;</td>
         <td>Head2</td>
         <td>content2</td>
         <td>&nbsp;</td>
      </tr>      
   </tbody>
</table>

CSS:

table.table.table-hover{ width:100%; }
table.table.table-hover tr td{ width:25% }

DEMO

Hope you will find this useful :)

like image 180
Dinesh Kumar Shaw Avatar answered Sep 17 '26 20:09

Dinesh Kumar Shaw


Please check this also according to your image

<table class="table table-hover" width="100%" cellpadding="0" cellspacing="0">
   <tbody>
      <tr>
        <td class="wid2">&nbsp;</td>
        <td class="wid1">Head1</td>
        <td class="wid1">content1.1</td>
        <td class="wid2">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>content1.2</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>content1.3</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
      <td>&nbsp;</td>
        <td>Head2</td>
        <td>content2</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>Head3</td>
        <td>content3</td>
        <td>&nbsp;</td>
      </tr>
   </tbody>
</table>

and this is css

table.table tr td{border-bottom:1px solid #000;}
.wid1{width:20%;}
.wid2{width:30%;}
like image 28
The Mechanic Avatar answered Sep 17 '26 22:09

The Mechanic



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!