How do I set the table cell widths to minimum except last column?

Question

I have a table with 100% width. If I put s in it, they get spread out with equal length columns. However, I want all the columns except last to have a

Answer 1

A combination of either white-space: nowrap or white-space: pre with min-width: <size> will do the job. width: <size> on itself is not enough to hold the table from squeezing.

Answer 2

whitespace-wrap: nowrap is not valid css. It's white-space: nowrap you're looking for.

Answer 3

td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}

By using the code above, the last table-cell will try to be as big as possible, and you will prevent the ones before that from wrapping. This does the same as the other answers given, but way more efficient.

Answer 4

You can set fix width by placing div tag inside td

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td:nth-child(1) {
  width: 1%;
}

table td:nth-child(1) div {
  width: 300px;
}

<table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

https://jsfiddle.net/8bf17o1v/

Answer 5

This works in Google Chrome, at least. (jsFiddle)

table {
  border: 1px solid green;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid green;
}

table td.shrink {
  white-space: nowrap
}

table td.expand {
  width: 99%
}

<table>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">elem</td>
    <td class="shrink">more data</td>
    <td class="shrink">other stuff</td>
    <td class="expand">again, last column</td>
  </tr>
  <tr>
    <td class="shrink">more</td>
    <td class="shrink">of </td>
    <td class="shrink">these</td>
    <td class="expand">rows</td>
  </tr>
</table>

Answer 6

If you need multiple text lines in table cell.

Do not use white-space: nowrap use white-space: pre; instead.

In table cell avoid any code format like new lines and indention (white-space) and use <br> to set a new text line/row. Like this:

<td>element1<br><strong>second row</strong></td>

Demo on CodePen