테이블 행의 마지막 셀이 나머지 모든 너비를 차지하도록 만드는 방법

테이블 행의 마지막 셀이 나머지 모든 너비를 차지하도록 만드는 방법

---

아래 HTML 조각에서 'LAST'가 포함 된 열의 너비가 행의 나머지 부분을 차지하고 'COLUMN ONE'과 'COLUMN TWO'가 포함 된 열의 너비는 콘텐츠를 포함 할 수있을만큼 충분히 넓게 만들 수 있습니다. , 그리고 크지 않습니다.

감사합니다

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>

---

처음 두 열에 줄 바꿈하지 않도록 지시하고 마지막 열의 너비를 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>

편집 : 모든 스타일 / 프레젠테이션을 (외부 ...) CSS에 넣어야합니다.

열에 대한 클래스 사용 ( nth-child()최신 브라우저 만 대상으로하는 경우 대신 css3 선택기를 사용할 수 있음 ) :

html :

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

css :

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

참고 URL : https://stackoverflow.com/questions/1060933/how-to-make-last-cell-of-a-row-in-a-table-occupy-all-remaining-width