Avoid HTML table overflow

Question

I try to create an HTML table with three columns and would like to set the width of two of the columns (in this case, the first and the third) to "auto" (the width that fits their content). I'd like the third column (the middle one) to take the rest of the space.

This works great if the content of the middle column is narrower than the remaining width of the middle column, but if the content takes more width than the column than I get a table overflow.

Is there a way to achieve this even with long texts in the middle column? (Desired behavior: "cut" the text of the middle column if needed).

<div style="background-color:orange; width:200px; padding: 5px">
  <table style="background-color: pink">
    <tr>
      <td style="background-color:red">
        123456
      </td>
      <td style="background-color:yellow; width:100%">
        1234567890123
      </td>
      <td style="background-color:green">
        123456
      </td>
    </tr>
  </table>
</div>

Don't think you can achieve that with tables. If you can, you should look into flex boxes — buhbang
– buhbang, Commented Nov 6, 2018 at 18:22
@WillardSolutions - If I add an "overflow:hidden" attrribute to the table, the table is cut in the middle of the text, I'd like the content to be cut in the middle column (fixed width), withe the last column presenting the full text. — Tal Sheffer
– Tal Sheffer, Commented Nov 6, 2018 at 18:27
@buhbang I tried it with flex boxes and it does not work either — Tal Sheffer
– Tal Sheffer, Commented Nov 6, 2018 at 18:38

buhbang · Accepted Answer · 2018-11-06 18:45:21Z

2

Don't think there is a way to do this with a table. Here's with flex if it works out for you.

.fake_table {
  width: 150px;
  padding: 5px;
  display: flex;
  background-color:orange;
}

.row {
    display: flex;
    box-sizing: border-box;
    background-color: pink;
    width: 100%;
}

.col1, .col3 { flex: 1; }
.col2 { overflow: hidden; }
  
.col1 { background-color:red}
.col2 { background-color:yellow; }
.col3 { background-color:green }

<div class="fake_table">
  <div class="row">
    <div class="col1">123456</div>
    <div class="col2">1234567890123</div>
    <div class="col3">123456</div>
  </div>
</div>

answered Nov 6, 2018 at 18:45

buhbang

7151 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tal Sheffer Over a year ago

This works! Thank you very much. I also found another solution, which is shorter (see below). What do you think about it?

buhbang Over a year ago

@TalSheffer, it will do for the question you were asking, but once you start adding more columns, it will break. Also you will need to give the row (the pink div) a css selector div:after and give it a clear: both or it might give some unwanted side-effects once you add more rows

Tal Sheffer · Accepted Answer · 2018-11-06 18:53:06Z

0

I found it! The solution is combination of float & overflow, not a table:

<div style="background-color:orange; width:200px !important; padding: 5px">
    <div style="background-color: pink">
        <div style="background-color:red; float:left">
            123456
        </div>
        <div style="background-color:green; float:right">
            123456
        </div>
        <div style="background-color:yellow; overflow:hidden">
            1234567890123456
        </div>
    </div>
</div>

answered Nov 6, 2018 at 18:53

Tal Sheffer

1651 silver badge10 bronze badges

1 Comment

buhbang Over a year ago

Make sure you use clear: both after each row. otherwise, it will get messy if you have multiple rows.

Collectives™ on Stack Overflow

Avoid HTML table overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related