Make Table Width 100% with Last Column Filling Remainder without squashing other columns content/width_问答_开发者

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!

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.

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>

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

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>

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>

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.

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;
}

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;
}

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>

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

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!