Search code examples
htmlcsstwitter-bootstraphtml-table

How to display an HTML table in two columns

In view I have table:

<table class="table table-hover table-striped">
     ....
</table>

I want to see next result in view:

table_row_1 | table_row_2 
table_row_3 | table_row_4 
table_row_5 | table_row_6 
etc.
Solution

  • How about this:

    table, tr, td, thead, tbody {display: block!important;}
tr {float: left!important; width: 50%!important;}
    <table class="table table-hover table-striped">
     <tr><td>1</td></tr>
     <tr><td>2</td></tr>
     <tr><td>3</td></tr>
     <tr><td>4</td></tr>
</table>

    I used !important because we most likely have to overrule Twitter Bootstrap (according to your class names). It would be better to NOT use !important and copy the Bootstrap classes/declarations (and make them slightly more specific), but this is just for simplicity and to prove this solution works.