마지막 열을 제외하고 표 셀 너비를 최소로 설정하려면 어떻게합니까?

너비가 100 % 인 테이블이 있습니다. <td>s를 넣으면 같은 길이의 열로 펼쳐집니다. 그러나 last를 제외한 모든 열이 텍스트를 줄 바꿈하지 않고 가능한 한 작은 너비를 갖기를 원합니다.

내가 먼저 한 것은 마지막을 제외한 width="1px"모든 <td>s를 설정했다는 것입니다 (사용되지 않지만 style="width:1px"효과가 없음). 열에 여러 단어로 된 데이터가있을 때까지 제대로 작동했습니다. 이 경우 길이를 최대한 작게 유지하기 위해 텍스트를 래핑했습니다.

제가 보여 드리겠습니다. 이 테이블을 상상해보십시오.

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

내가 무엇을 시도하든 내가 계속 얻는 것은 다음 중 하나입니다.

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

또는 (내가 설정했지만 style="whitespace-wrap:nowrap") 이것을 :

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

먼저 제시 한 테이블을 받고 싶습니다. 어떻게해야합니까? (차라리 표준을 고수하고 CSS를 사용하고 싶습니다. IE가 표준의 일부를 구현하지 않았는지 솔직히 신경 쓰지 않습니다)

추가 설명 : 내가 필요한 것은 줄 바꿈없이 열을 가능한 한 짧게 유지하는 것입니다 (마지막 열은 테이블 너비가 실제로 100 %에 도달하는 데 필요한만큼 커야합니다). LaTeX를 알고 있다면, 제가 원하는 것은 테이블의 너비를 100 %로 설정했을 때 LaTeX에서 테이블이 자연스럽게 나타나는 방식입니다.

참고 : 내가 찾은 이 하지만 여전히 나에게 마지막 테이블과 같은 수 있습니다.

whitespace-wrap: nowrap유효한 CSS가 아닙니다. 그건 white-space: nowrap당신이 찾고 있습니다.

이것은 적어도 Google 크롬에서 작동합니다. ( 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%;
}

위의 코드를 사용하면 마지막 테이블 셀이 가능한 한 커지도록 시도하고 이전 테이블 셀이 래핑되지 않도록합니다. 이것은 주어진 다른 답변과 동일하지만 훨씬 더 효율적입니다.

약간 다른 주제이지만 나처럼이 질문에 우연히 발견하는 사람에게 도움이 될 수 있습니다.
_{(아래에 내 답변을 작성한 후 정확히 이것을 제안한 Campbeln의 의견을 보았으므로 기본적으로 그의 의견에 대한 자세한 설명입니다)}

다른 방법으로 문제가 발생했습니다. 하나의 테이블 열을 공백 (다음 예제의 마지막 열)에서 나누지 않고 가능한 최소 너비로 설정하고 싶었지만 다른 너비는 동적이어야합니다 (줄 바꿈 포함).

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

간단한 솔루션 :

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

클래스가있는 열 shrink은 최소 너비로만 확장되지만 다른 열은 동적으로 유지됩니다. 이것은 작동하기 때문에width 의td 자동으로 모든 컨텐츠에 맞게 확장됩니다.

스 니펫 예

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>

div내부 에 태그 를 배치하여 고정 너비를 설정할 수 있습니다.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/

표 셀에 여러 텍스트 줄이 필요한 경우.

사용하지 마십시오 white-space: nowrap사용white-space: pre; 대신.

테이블 셀에서 새 줄 및 들여 쓰기 (공백)와 같은 코드 형식을 피하고 <br>새 텍스트 줄 / 행을 설정하는 데 사용 합니다. 이렇게 :

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

CodePen 데모

white-space: nowrap또는 white-space: pre와의 조합이 min-width: <size>작업을 수행합니다. width: <size>그 자체로는 테이블을 쥐어 짜기에는 충분하지 않습니다.