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:

Couple thoughts here. If you have to have some of the text cut off, overflow:hidden; basically cancel's out that effect so if there was extra text then it will get hidden. I'm not sure I understand the point of a) keeping all in one line and having some of the lines cut off (not hidden) and b) having more than one table overlay each other. — Keith, Jul 31 '13 at 12:17
a) I don't want those tables to overlap. That's exactly what I want to avoid. b) I'm okay to truncate the text at the point where it does not fit into the table's width. c) Why is there always somebody asking "WHY" on this site even when it does not help to solve the problem? ;) — BlaM, Jul 31 '13 at 12:25
@BlaM Asking why is a means of ascertaining what variants of solutions the OP would accept. — Mr Lister, Jul 31 '13 at 12:27

score 80 · Answer 1 · answered Apr 15 '14 at 00:57

80

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/

answered Apr 15 '14 at 00:57

eudemonics

961
6
6

1

Brilliant, thank you! This works well regardless of width value, but I only tested with percentage widths. – John Suit Aug 14 '15 at 16:59
Why do you include `width="100%"` in the HTML tag? – swenedo Aug 02 '17 at 08:34
1

@swenedo Styles as attributes in an HTML tag are 'in-line' styles, and they take precedence over any styles in the `` element or in any external stylesheets. It is a way to ensure that the table is set to `width: 100%;` rather than something different like `width: auto;` declared elsewhere. – TylerH Aug 30 '17 at 15:55
4

Per MDN wrt to `width` attribute: _"Do not use this attribute, as it has been deprecated."_ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table -- furthermore, it's unnecessary. – Madbreaks Feb 14 '18 at 23:23
1

That makes all columns the same width, which is not what I'm after. There no need to allocate the same width to columns containing numerical values as to the columns with large text – Dmitry Efimenko Nov 18 '19 at 21:13
Thanks really a lot! I've been looking for this for hours! – nd091680 Feb 24 '21 at 12:03

CyberAP · Answer 2 · 2014-04-15T12:21:27.100

8

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/

edited Apr 15 '14 at 12:21

answered Apr 15 '14 at 11:31

CyberAP

1,195
1
11
17

I found that the effect of max-width and min-width on tables and their parts is explicitly undefined by the CSS 2.1 spec. So any related behavior likely cannot be depended on. Still interesting to know. – Palec Nov 22 '21 at 01:28

LF00 · Answer 3 · 2016-11-29T01:30:38.727

.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>

Only works with text tables, not tables containing complex data. — Tomáš Zato, Oct 27 '17 at 13:18

score 2 · Answer 4 · answered Jul 31 '13 at 12:24

2

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.

answered Jul 31 '13 at 12:24

Mr Lister

45,515
15
108
150

I can only work with percentage based widths because I can never know how wide the column will be. When I use 10em it may be too narrow or too wide. Giving the
a percentage based width does not help, though.
– BlaM Jul 31 '13 at 12:30
Sorry, but like I said in my edit, I hadn't added divs to all the tds. Still hope you can work with the idea though. – Mr Lister Jul 31 '13 at 12:31
Missing divs is not the problem. "max-width: 10em" is the part not helping me. The column may be 100em wide or it may be 5em wide. That depends on the screen-/paper-size, and I don't know beforehand. I could try to figure it out with javascript, but it feels like a dirty hack to me ;) – BlaM Jul 31 '13 at 12:35
The 10em was just an example. Just like your fiddle was just an example. Apply the size you need to the divs in the tds instead of the tds themselves. Ther problem is not that I want your columns to be 10em wide, but that tds refuse to shrink to whatever width you give them. Here's a fiddle I made earlier: http://jsfiddle.net/MrLister/HnB3G/3/ – Mr Lister Jul 31 '13 at 12:46
2

My problem is that the width I want is "as wide as possible". I **can't** use absolute values - such as px, pt, em - because I don't know how wide the table will be. It's all just percentages. – BlaM Jul 31 '13 at 12:49

score -4 · Answer 5 · answered Jul 03 '14 at 01:05

-4

In your CSS:

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

That should cover all tables

answered Jul 03 '14 at 01:05

RAC

516
1
9
21

Nothing changes when I add this. – BlaM Jul 07 '14 at 13:21
1

Won't work if your tables have fixed widths declared in the html (ie width="500px") – RAC Aug 27 '14 at 00:50

Force HTML Tables To Not Exceed Their Containers' Size

5 Answers5

Linked