title: Bootstrap 4 responsive table: How to fix column width and make table always take up 100 % width of parent element?
body: <p>I'm using Bootstrap 4 to create responsive tables. On one page I have a 2-column layout like this:</p>
  <pre><code>|-----------------|---------------|
  |Table            |Image          |
  |-----------------|---------------|
  </code></pre>
  <p>The table is wrapped by <code>&lt;div class=&quot;table-responsive&quot;&gt;</code>. For the columns in the first row a specific column width is given as percentage:</p>
  <pre><code>&lt;tr class=&quot;header&quot;&gt;
      &lt;td style=&quot;width:20%;&quot;&gt;Column 1&lt;/td&gt;
      &lt;td style=&quot;width:10%;&quot;&gt;Column 2&lt;/td&gt;
      &lt;td style=&quot;width:30%;&quot;&gt;Column 3&lt;/td&gt;
      &lt;td style=&quot;width:30%;&quot;&gt;Column 4&lt;/td&gt;
      &lt;td style=&quot;width:10%;&quot;&gt;Column 5&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  <p>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:</p>
  <p><a href="https://i.stack.imgur.com/guOW5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/guOW5.png" alt="enter image description here" /></a></p>
  <p>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 <code>table-layout:fixed</code> but to no avail - content is still overflowing.</p>
  <p>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.</p>
  <p>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.</p>
  <p>Thanks in advance.</p>