How to display table in two columns

html twitter-bootstrap html-table two-columns
Igor Ostapiuk picture Igor Ostapiuk · Jan 18, 2018 · Viewed 11.8k times · Source

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.

Answer

JoostS picture JoostS · Jan 18, 2018

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.

Related questions

Table fixed header and scrollable body

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or mess up the style. Here there is a simple bootstrap …

Read More
Why is the Bootstrap grid layout preferable to an HTML table?

[Note: for those who may be confusing this question with "why not use tables for HTML layout", I am not asking that question. The question I'm asking is why is a grid layout fundamentally different from a table layout.] I'm …

Read More
How to add space between table rows with border without using border-spacing and empty rows

I tried to use border-spacing attribute. But my table has header with multiple rows which are also affected by it. I need spaces only between rows in table body. I tried to use empty rows with some height. But i …

Read More