html - Twitter Bootstrap table width full width but content centered -


i have table (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 table lines on full width of it's container 2 cells header , content should centered.. i've tried describe in image:

i cant upload image here, i've done somewhere else:

see image more description

i have shown 2 rows (tr). can add many rows 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 find useful :)


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -