CODEWITHSUNDEEP
twitter-bootstraphtml-tableresponsive
bear87
bear87

Reputation: 83

Bootstrap 4 responsive table: How to fix column width and make table always take up 100 % width of parent element?

I'm using Bootstrap 4 to create responsive tables. On one page I have a 2-column layout like this:

|-----------------|---------------|
|Table            |Image          |
|-----------------|---------------|

The table is wrapped by <div class="table-responsive">. For the columns in the first row a specific column width is given as percentage:

<tr class="header">
    <td style="width:20%;">Column 1</td>
    <td style="width:10%;">Column 2</td>
    <td style="width:30%;">Column 3</td>
    <td style="width:30%;">Column 4</td>
    <td style="width:10%;">Column 5</td>
</tr>

This layout works as expected: The table stretches to 100 % width of its parent div. But on small viewports content of some columns is overflowing. It gets even worse the more columns my table has. Check out this screenshot:

enter image description here

I could solve this by adding some CSS to make the content break to a new line if it is too long. But this is not what I want. Instead, I'd like the table columns to be of a fixed width and a horizontal scrollbar to be displayed if viewport width is too small for displaying the table as a whole. I tried to set table-layout:fixed but to no avail - content is still overflowing.

I was able to achieve the desired result by specifying table and column width in pixels. But then the table won't take the full width of its parent div on large viewports.

How can I get the desired effect (as I was able to by specifying widths in pixels) but make the table to always fill up 100 % of its parent div? I checked several questions on StackOverflow but none of them got me the desired output.

Thanks in advance.

Upvotes: 4

Views: 7403

Answers (1)

bear87
bear87

Reputation: 83

I now managed to find a solution that suits at least my needs:

<div class="table-responsive">
  <table class="w-auto mw-100">
    ...table elements...
  </table>
</div>

The classes .table-responsive and .w-auto are Bootstrap standard, whereas .mw-100 has been added by me:

.mw-100 {
  min-width:100%;
}

I don't know if this is the "right way" to deal with the issues mentioned in my opening post but at least for me it works fine.

Upvotes: 2

Related Questions