Make Table Width 100% with Last Column Filling Remainder without squashing other columns content/width

Question

Is it possible to make a table (which will have dynamically created text) to have for example:

table width 100% of the screen 5 columns last column is empty ( ) the first four columns have text and their width is dynamic the last column is remainder of the width without squashing the text in the first four columns

I have this so far and it squashes the text which is what I'm trying to avoid:

<table style="width:100%;" border="1">
<tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four Five</td>
    <td>Four Five Six</td>
    <td style="width:100%;">&nbsp;</td>
</tr>
</table>

I can't use "white-space: nowrap" as I do want the text to wrap if there's enough text.

Edit: "I'd just like the [first four] columns to be the width they would be if I removed the width attribute from the table tag. But still have the table be 100% of the width of the page."

Any ideas? CSS solutions preferable!

I'm trying to get the first four columns to be close to each other. Kind of like selecting all the columns in Excel and double-clicking the edge of a column which auto-sizes the column widths to fit all the text but not forcing word wrap...so all the columns (except the last empty one) are towards the left of the page. — txchou, Oct 01 '11 at 02:17
@txchou Can you create a fiddle? Also can you explain why you need a structure like the way you want. Assuming you are using table for creating your layout, I feel the way you are trying to do is semantically incorrect. HTML table tag should not be used for layouts. Here is a link to what semantically correct html mean. http://stackoverflow.com/questions/1294493/what-does-semantically-correct-mean. However, this is just my assumption. I may be incorrect. But if you are using table for creating a layout then I would say not to use table. — Rupam Datta, May 29 '14 at 05:30

YakovL · Answer 1 · 2019-01-24T11:12:26.777

This is what worked for me (in FireFox, Chrome and old 12.x Opera). My tables which I wanted to have 100% width and the last column to fill the rest has the class tableList and here's CSS:

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; } /* well, it's less than 100% in the end, but this still works for me */

Below, there's a snippet to try:

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */

<table class="tableList">
  <tr><td>game's</td><td>not</td><td>over</td></tr>
  <tr><td>one</td><td>two</td><td>three and more</td></tr>
</table>

Like Rahat has noticed, if the content of a column other than the first one is more than one word, it becomes multiline (one line per word):

.tableList { width: 100%; }
.tableList td { width: 1px; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */

<table class="tableList">
  <tr><td>game's</td><td>not</td><td>over</td></tr>
  <tr><td>one</td><td>two plus plus</td><td>three and more</td></tr>
</table>

but he also has suggested a workaround – adding white-space: nowrap:

.tableList { width: 100%; }
.tableList td { width: 1px; white-space: nowrap; } /* min width, actually: this causes the width to fit the content */
.tableList td:last-child { width: 100%; background-color: yellow; } /* well, it's less than 100% in the end, but this still works for me */

<table class="tableList">
  <tr><td>game's</td><td>not</td><td>over</td></tr>
  <tr><td>one</td><td>two plus plus</td><td>three and more</td></tr>
</table>

This is a nice solution unless you have multi-word headers. They get word wrapped to multiple lines. To fix that you can use `white-space: nowrap` — Rahat Ahmed, Oct 17 '16 at 15:22

Danield · Answer 2 · 2015-11-26T16:30:31.727

You can use flexbox to accomplish this

CSS

table {
    width:100%;
    border: 1px solid black;
    border-collapse: collapse;
}
td + td {
    border-left: 1px solid black;
}
tr {
    display: flex;
    align-items: stretch;
}
td:last-child {
    flex: 1;
    background: yellow;
    display:inline-block;
    /* to keep IE happy */
}

FIDDLE (Resize the browser window to see this in action)

table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}
td + td {
  border-left: 1px solid black;
}
td:last-child {
  background: yellow;
}

<table>
  <tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
    <td>Four Five Six</td>
    <td>&nbsp;f</td>
  </tr>
</table>

NB:

IE 10-11 has an issue that Inline elements (and apparently table-cells as well) are not treated as flex-items.

This issue is documented by Phillip Walton here and the workaround (from the above post) is:

This issue can be avoided by adding a non-inline display value to the items, e.g. block, inline-block, flex, etc.

Btw: the following is what the same fiddle above looks like without using flexbox - Notice that the last td doesn't actually fill up the remaining space, but rather takes up it's own natural space - which is what the OP did NOT want.

http://jsfiddle.net/LCpRd/2/ You can clearly see here that it isn't taking the remaining space. — Jerska, Jun 17 '14 at 00:14
Flexbox tables tend to break column-alignment the moment you have more than one row. — Adrian, Jun 16 '17 at 11:41
@Adrian - the context of the the question is about a table with only one row. — Danield, Jun 18 '17 at 05:27

connexo · Answer 3 · 2019-01-26T10:06:23.030

6

Just add

table-layout: fixed;

to your table, and you're done.

Assuming your texts in the other columns do not force a table wider than 100%, your last column will always stretch, so not necessary to apply any widths on the <td>.

edited Jan 26 '19 at 10:06

answered Jun 16 '14 at 19:12

connexo

53,704
14
91
128

2

hm, this doesn't seem to work, at least in contemporary Chrome. I've added a snippet to illustrate your answer and as you can see it distributes the whitespace between the columns instead of leaving it to the last one – YakovL Jan 24 '19 at 11:10
I agree, this doesn't solve the problem, if you have longer string in two columns they'll overlap – TheLD May 28 '20 at 09:54

score 3 · Answer 4 · edited Jan 24 '19 at 10:52

3

I solved the same issue by using max-width=99% for the last column and gave fixed sizes to the other columns.

<table style='width: 100%' border='1'>
  <tr>
    <td style='width:60px'><b>Label 1</b></td>
    <td style='width:120px;'><b>Label 2</b></td>
    <td style='max-width:99%;'><b>Label 3</b></td>
  </tr>
</table>

edited Jan 24 '19 at 10:52

YakovL

7,557
12
62
102

answered May 20 '14 at 14:09

Loic Lacomme

327
3
5

score 2 · Answer 5 · edited Jan 24 '19 at 11:01

2

Perhaps instead of setting the last column to 100%, set it to auto?

<table style="width:100%;" border="1">
  <tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four Five</td>
    <td>Four Five Six</td>
    <td style="width:auto;">&nbsp;</td>
  </tr>
</table>

edited Jan 24 '19 at 11:01

YakovL

7,557
12
62
102

answered Jul 11 '14 at 00:12

David Zulaica

350
3
6

score 0 · Answer 6 · edited Jan 24 '19 at 10:46

0

Try this method, might work for you.

.myTable {
  width: 100%;
}
.myTable td:last-child {
  width: auto;
}

<table class="myTable" border="1">
  <tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four Five</td>
    <td>Four Five Six</td>
    <td>&nbsp;</td>
  </tr>
</table>

Or through CSS:

table {
  width: 100%;
}

table td:nth-child(-n+4) div
{
  min-width: 100px;
}

edited Jan 24 '19 at 10:46

YakovL

7,557
12
62
102

answered Jul 12 '14 at 11:59

Javed

169
1
9

I've added a snippet for the first solution and it doesn't work for me in Chrome: on the opposite, all columns except the last one grow to fit the width, the last one having the minimal width – YakovL Jan 24 '19 at 10:49
also, -1 for copying the answer by David Zulaica – YakovL Jan 24 '19 at 11:01

score 0 · Answer 7 · answered Oct 01 '11 at 04:24

It sounds like you want the browser to "intelligently" determine how wide each column should be. You want the columns to wrap, but you don't want their widths to be too small. The problem is that when it's completely up to the browser, the browser can arbitrarily choose how wide each column is. 10 pixels? 100 pixels? Sure, both would be valid if you're not giving the browser any hints.

You can try min-width and max-width as a compromise for your column widths to be dynamic but within a certain range.

If it's possible that a column may be really narrow (e.g. if the data in that column consists of single-digit numbers), then using just max-width might be preferred.

I'd just like the columns to be the width they would be if I removed the width attribute from the table tag. But still have the table be 100% of the width of the page. Seems like it's not possible to do easily. Thanks anyway! — txchou, Oct 01 '11 at 08:29

lindsay · Answer 8 · 2014-05-29T05:21:42.210

It depends on the technologies you have available, but perhaps you could try

/* CSS3 method */
table {
   width: 100%;
}
table td:nth-child(-n+4) {
   min-width: 25%; /* Or set the minimum PX/Percent width */
}

/* CSS2 without nth-child selector */

table {
   width: 100%;
}
table td,
table td + td,
table td + td + td,
table td + td + td + td {
   min-width: 25% /* Or set the minimum PX/Percent width */
}

This should set the width of the content areas and allow the final column to find its width dynamically.

Another method could be to do something like this, assuming you're able to put content inside of your tables.

/*Markup*/ 
<table width="100%" border="1">
   <tr>
      <td>
         <div>One</div>
      </td>
      <td>
         <div>Two</div>
      </td>
      <td>
         <div>Three</div>
      </td>
      <td>
         <div>Four</div>
      </td>
      <td>
         <div>Five</div>
      </td>
      <td>
         <div>&nbsp;</div>
      </td>
   </tr>
</table>


/* CSS3 method */

table {
   width: 100%;
}
table td:nth-child(-n+4) div {
   min-width: 100px;
}

/* CSS2 without nth-child selector */

table {
   width: 100%;
}
table td div,
table td + td div,
table td + td + td div,
table td + td + td + td div {
   min-width: 100px;
}

score -1 · Answer 9 · answered Jul 15 '14 at 10:18

try this (Demo)

table {
    width:100%;   
    table-layout: fixed; 
}
td:last-child {
    background: yellow;
    width:200px;
    layout:
}


<table border="1">
<tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>
    <td>Four Five Six</td>
    <td></td>
</tr>
</table>

score -1 · Answer 10 · edited Jan 24 '19 at 10:54

-1

try this, it will occupy 100% width without squashing the last column

<table style="width:100%" border=1>
  <tr style="visibility:hidden">
    <td width=20%></td>
    <td width=20%></td>
    <td width=20%></td>
    <td width=20%></td>
    <td width=20%></td>
  </tr>

  <tr>
    <td>One Two Three</td>
    <td>Two Three Four</td>
    <td>Three Four Five</td>
    <td>Four Five Six</td>
    <td></td>
  </tr>
</table>

leave the fifth column blank and the width will be divided equally

edited Jan 24 '19 at 10:54

YakovL

7,557
12
62
102

answered Jul 16 '14 at 14:42

paulgmathew

1
2

actually, this doesn't comply to the "with Last Column Filling Remainder" demand – YakovL Jan 24 '19 at 10:56

score -2 · Answer 11 · answered Apr 09 '13 at 20:07

Yes, this is not that difficult, though sometimes various browsers will display this a little differently. There are actually several ways to do this, but this is my favorite. The first rows is just a list of the field names and also setting the width of each column...except the last one.

<table style='width: 100%' border='1'>
<tr>
 <td style='width:100px;'><b>Label 1</b></td>
 <td style='width:120px;'><b>Label 2</b></td>
 <td style='width:60px;'><b>Label 3</b></td>
 <td style='width:100px;'><b>Label 4</b></td>
 <td><b>Label 5</b></td>
</tr>

 <!-- insert dynamically generated rows -->

</table>

I have found this works well, particularly if you need only one of the fields to be taking up the remainder. All you do is set the sizes of the fields you need constant, and leaving the one you don't.

Another way to do this is to define css classes with the specific widths, but that's just another way of formatting the same style sheet, really!

The first four columns are supposed to be dynamic, not fixed width. — Martha, Dec 12 '13 at 03:01

Make Table Width 100% with Last Column Filling Remainder without squashing other columns content/width

11 Answers11

CSS

NB: