Cách tạo ô cuối cùng của một hàng trong bảng chiếm toàn bộ chiều rộng còn lại

Question

Trong đoạn HTML bên dưới, làm cách nào để làm cho chiều rộng của cột chứa 'LAST' chiếm phần còn lại của hàng và độ rộng của cột chứa 'COLUMN ONE' và 'COLUMN TWO' chỉ đủ rộng để chứa nội dung của chúng và không lớn hơn.

Cảm ơn bạn

table { 
 
    border-collapse: collapse; 
 
} 
 
table td { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <table width="100%"> 
 
     <tr> 
 
      <td> 
 
      <span> 
 
      COLUMN 
 
      </span> 
 
      <span> 
 
      ONE 
 
      </span> 
 
      </td> 
 
      <td> 
 
      COLUMN TWO 
 
      </td> 
 
      <td> 
 
      LAST 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     ANOTHER ROW 
 
    </td> 
 
    </tr> 
 

 
</table>

Answer 1

Bạn sẽ cần phải nói với hai cột đầu tiên không để bọc và cung cấp cho các cột cuối cùng có chiều rộng 99%:

<table width="100%"> 
     <tr> 
     <td style="white-space: nowrap;"> 
      <span> 
      COLUMN 
      </span> 
      <span> 
      ONE 
      </span> 
     </td> 
     <td style="white-space: nowrap;"> 
      COLUMN TWO 
     </td> 
     <td width="99%"> 
      LAST 
     </td> 
     </tr> 
    </table> 

Chỉnh sửa: Bạn nên đặt tất cả các kiểu/bản trình bày trong (bên ngoài ...) css.

Sử dụng các lớp học cho các cột (bạn có thể sử dụng bộ chọn css3 như nth-child() thay vì nếu bạn chỉ nhắm mục tiêu các trình duyệt hiện đại):

html:

<tr> 
    <td class="col1"> 
    // etc 

css:

.col1, .col2 { 
    white-space: nowrap; 
} 
.col3 { 
    width: 99%; 
}