How do I set the table cell widths to minimum exce

问题:

I have a table with 100% width. If I put <td>s in it, they get spread out with equal length columns. However, I want all the columns except last to have as small a width as possible, without wrapping text.

What I did first was that I set width="1px" in all <td>s except last (although deprecated, but the style="width:1px" didn't have any effect), which worked fine until I had multi-word data in the column. In that case, to keep the length as small as possible, it wrapped my text.

Let me demonstrate. Imagine this table:

---------------------------------------------------------------------------------
element1 | data      | junk here   | last column
---------------------------------------------------------------------------------
elem     | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more     | of        | these       | rows
---------------------------------------------------------------------------------

No matter what I try, what I keep getting is either this:

---------------------------------------------------------------------------------
element1         | data             | junk here        | last column
---------------------------------------------------------------------------------
elem             | more data        | other stuff      | again, last column
---------------------------------------------------------------------------------
more             | of               | these            | rows
---------------------------------------------------------------------------------

or (even though I set style="whitespace-wrap:nowrap") this:

---------------------------------------------------------------------------------
         |      | junk  | last
element1 | data |       | 
         |      | here  | column
---------------------------------------------------------------------------------
         | more | other | again,
elem     |      |       | last
         | data | stuff | column
---------------------------------------------------------------------------------
more     | of   | these | rows
---------------------------------------------------------------------------------

I want to get the table I presented first. How do I achieve this? (I'd rather stick to standard and using CSS. I honestly don't care if IE hasn't implemented part of the standard either)

More explanation: What I need is to keep the columns as short as possible without wrapping words (last column should be as large as it needs to make the table width actually reach 100%). If you know LaTeX, what I want is how tables naturally appear in LaTeX when you set their width to 100%.

Note: I found this but it still gives me the same as last table.

回答1:

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

回答2:

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

HTML:

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

CSS:

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

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

回答4:

Slightly different topic but maybe it helps someone who stumbles on this question like me.
_{(I just saw the comment by Campbeln who suggests exactly this after writing my answer below, so this is basically a detailed explanation of his comment)}

I had the problem the other way around: I wanted to set one table column to the minimum width possible without breaking it on white space (last column in the following example) but the other's width should be dynamic (including line breaks):

-----------------------------------------------------------------------------------
element1 | data      | junk here which can   | last column, minimum width, one line
                       span multiple lines
-----------------------------------------------------------------------------------
elem     | more data | other stuff           | again, last column
-----------------------------------------------------------------------------------
more     | of        | these                 | rows
-----------------------------------------------------------------------------------

Simple solution:

HTML

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

CSS

td.shrink {
  white-space: nowrap;
  width: 1px;
}

Columns with class shrink only expand to the minimum width but others stay dynamic. This works because width of td is automatically expanded to fit whole content.

Example Snippet

table {
  width: 100%;
}

td {
  padding: 10px;
}

td.shrink {
  white-space: nowrap;
  width: 1px;
}

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

回答5:

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/

回答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