Làm cách nào để đặt độ rộng ô trong bảng thành tối thiểu ngoại trừ cột cuối cùng?

Tôi có một bảng với chiều rộng 100%. Nếu tôi đặt <td>s vào đó, chúng sẽ trải ra với các cột có chiều dài bằng nhau. Tuy nhiên, tôi muốn tất cả các cột ngoại trừ cột cuối cùng có chiều rộng càng nhỏ càng tốt, không có dòng chữ bao quanh.

Những gì tôi đã làm đầu tiên là tôi đặt width="1px"tất cả các <td>s ngoại trừ cuối cùng (mặc dù không được dùng nữa, nhưng style="width:1px"không có bất kỳ tác dụng nào), điều này hoạt động tốt cho đến khi tôi có dữ liệu nhiều từ trong cột. Trong trường hợp đó, để giữ độ dài càng nhỏ càng tốt, nó đã bao bọc văn bản của tôi.

Hãy để tôi chứng minh. Hãy tưởng tượng bảng này:

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

Bất kể tôi cố gắng gì, những gì tôi tiếp tục nhận được là:

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

hoặc (mặc dù tôi đã đặt style="whitespace-wrap:nowrap") cái này:

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

Tôi muốn lấy cái bàn mà tôi đã trình bày trước. Làm cách nào để đạt được điều này? (Tôi thà bám vào tiêu chuẩn và sử dụng CSS. Thành thật mà nói, tôi không quan tâm nếu IE cũng chưa triển khai một phần của tiêu chuẩn)

Giải thích thêm: Những gì tôi cần là giữ cho các cột càng ngắn càng tốt mà không bao gồm các từ (cột cuối cùng phải lớn nhất có thể để chiều rộng bảng thực sự đạt 100%). Nếu bạn biết LaTeX, điều tôi muốn là làm thế nào các bảng tự nhiên xuất hiện trong LaTeX khi bạn đặt chiều rộng của chúng thành 100%.

Lưu ý: Tôi tìm thấy này nhưng nó vẫn mang lại cho tôi giống như bảng cuối cùng.

whitespace-wrap: nowrapkhông phải là css hợp lệ. Đó là white-space: nowrapbạn đang tìm kiếm.

Điều này ít nhất cũng hoạt động trong Google Chrome. ( 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>

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

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

Bằng cách sử dụng đoạn mã trên, ô cuối cùng của bảng sẽ cố gắng lớn nhất có thể và bạn sẽ ngăn những ô trước đó không được gói lại. Điều này làm tương tự như các câu trả lời khác được đưa ra, nhưng hiệu quả hơn.

Chủ đề hơi khác một chút nhưng có lẽ nó sẽ giúp ích cho những người đang vấp phải câu hỏi này như tôi.
_{(Tôi vừa nhìn thấy nhận xét của Campbeln, người đã gợi ý chính xác điều này sau khi viết câu trả lời của tôi bên dưới, vì vậy về cơ bản đây là lời giải thích chi tiết về nhận xét của anh ấy)}

Tôi đã gặp vấn đề theo cách khác: Tôi muốn đặt một cột trong bảng thành chiều rộng tối thiểu có thể mà không phá vỡ nó trên khoảng trắng (cột cuối cùng trong ví dụ sau) nhưng chiều rộng của cột kia phải là động (bao gồm cả ngắt dòng):

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

Giải pháp đơn giản:

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

Các cột có lớp shrinkchỉ mở rộng đến chiều rộng tối thiểu nhưng các cột khác vẫn động. Này hoạt động vì widthcác tdđược tự động mở rộng để phù hợp với toàn bộ nội dung.

Đoạn mã ví dụ

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>

Bạn có thể đặt chiều rộng cố định bằng cách đặt divthẻ bên trongtd

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/

Nếu bạn cần nhiều dòng văn bản trong ô bảng.

Không sử white-space: nowrapdụng white-space: pre;thay thế.

Trong ô bảng, tránh bất kỳ định dạng mã nào như dòng mới và thụt lề (khoảng trắng) và sử dụng <br>để đặt dòng / hàng văn bản mới. Như thế này:

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

Demo trên CodePen

Sự kết hợp của một trong hai white-space: nowraphoặc white-space: prevới min-width: <size>sẽ thực hiện công việc. width: <size>tự nó là không đủ để giữ bàn từ ép.