Force HTML Tables To Not Exceed Their Containers' Size

Question

This question has been asked several times, but none of the answers provided seem to help me:

See this in action here: http://jsfiddle.net/BlaM/bsQNj/2/

I have a "dynamic" (percentage based) layout with two columns.

.grid {
    width: 100%;
    box-sizing: border-box;
}
.grid > * {
    box-sizing: border-box;
    margin: 0;
}
.grid .col50 {
    padding: 0 1.5%;
    float: left;
    width: 50%;
}

In each of these columns I have a table that is supposed to use the full column width.

.data-table {
    width: 100%;
}
.data-table td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

My problem is that some of the columns in that table have content that needs to be truncated to fit in the given width of the table. That does not happen, though. I get two tables that are overlaying each other.

Requirements:

• Needs to be percentage based. I can't set absolute sizes.
• Each rows' height must not grow beyond one text line (which would happen if I remove white-space: nowrap)
• Must work in Chrome, Firefox and Internet Explorer 8+
• Can't display tables below each other as it has to fit onto one sheet of paper when printing.

What I tried:

• inside of and use width and overflow on that. Changed nothing.
• "display: table;" on containing div - instead of having two columns the tables were displayed below each other
• "table-layout: fixed;" - Forced all columns to have same width
• I know that columns 2+3 have a total of 30% of width so I tried to manually set column 1 to 70% - Did not change anything
• Zero-width spaces in content - didn't change anything, probably due to white-space: nowrap;

Related Questions:

• Table width exceeds container's width
• How do I prevent my HTML table from stretching
• HTML CSS How to stop a table cell from expanding
• Table Overflowing Outside of Div

Answer 1

you need to add the table-layout property:

table-layout: fixed;

also include width=100% in the table HTML tag, not just the style tag.

http://jsfiddle.net/reeK5/

Answer 2

Maybe you'll be interested in a max-width: 0; hack I've discovered.

It has some limits, we should use CSS tables instead of HTML, but it works:

.leftBlock
{
    width: 100%;
    max-width: 0;
    word-wrap: break-word;
    overflow: hidden;
}

.rightBlock
{
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}

http://jsfiddle.net/CyberAP/NUHTk/103/

Answer 3

Measurements on tables work differently. In general, width on a table cell is handled as min-width.

One solution, if you don't mind adding extra markup, is to put a div inside each table cell in which you put the content. Then give this div a width, or a max-width. So

<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>

becomes

<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>

and so on.

See updated fiddle: http://jsfiddle.net/bsQNj/4/

Edit: I see the fiddle needs some work - I forgot to put some divs in where they were necessary. But I hope you can work with this idea.

Answer 4

.div {
  width:300px;
  border:1px solid;
}
.breaked {
  word-break: break-all;
}
table{
  border:1px solid red;
}
td {
  border:1px solid green;
}

<div class="div">
<table>
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
  <br /><hr/><br />
  <table class="breaked">
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
</div>

Answer 5

In your CSS:

table {
    table-layout: auto;
    width: 100%;
}   

That should cover all tables