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!

Answers


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>

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


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>

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>

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>

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!


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>

Need Your Help

Misbehaviour of Backstack of activity when activity destroyed

android android-activity broadcastreceiver android-lifecycle back-stack

I have two activities; let's say A and B. In activity A there is a broadcast receiver registered that listens for a particular event which will finish activity A. I am registering the broadcast rec...