내용에 셀 너비 맞추기

다음 마크 업이 주어지면 CSS를 사용하여 하나의 셀 (열의 모든 셀)을 확장하지 않고 내용의 너비에 맞출 수 있습니까 (기본 동작)?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

편집 : 너비를 하드 코딩 할 수 있다는 것을 알고 있지만 그 열에 들어갈 내용이 동적이기 때문에 오히려 그렇게하고 싶지 않습니다.

아래 이미지를 보면 첫 번째 이미지가 마크 업이 생성하는 것입니다. 두 번째 이미지는 내가 원하는 것입니다.

귀하의 질문을 이해하고 있는지 잘 모르겠지만 질문을하겠습니다. 예제의 JSfiddle .

HTML :

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS :

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

환경

max-width:100%;
white-space:nowrap;

문제를 해결할 것입니다.

나에게 이것은 테이블과 열에 가장 적합한 자동 맞춤과 자동 크기 조정입니다 (CSS를 사용하십시오! 중요하지 않은 경우에만 사용하십시오!)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

테이블 또는 테이블 열에 CSS 너비를 지정하지 마십시오. 테이블 내용이 크면 화면 크기가 커집니다.

내가 알 수있는 모든 사양에 따라 CSS 너비를 요소의 1 % 또는 100 %로 설정하는 것은 부모와 관련이 있습니다. 글을 쓰는 순간 Blink Rendering Engine (Chrome)과 Gecko (Firefox)는 1 % 또는 100 % (열을 줄이거 나 가용 공간을 채우기 위해 열을 만드는)를 잘 처리하는 것처럼 보이지만 모든 CSS 사양에 따라 보장되는 것은 아닙니다. 제대로 렌더링 할 수 있습니다.

한 가지 옵션은 테이블을 CSS4 flex div로 바꾸는 것입니다.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

이것은 새로운 브라우저에서 작동합니다. IE11 +는 기사 하단의 표를 참조하십시오.

이를 수행하는 방법에는 여러 가지가 있습니다!

내가 틀렸다면 나를 수정하지만 질문은 이런 종류의 결과를 찾고 있습니다.

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

처음 2 개의 필드는 나머지 페이지를 "공유"합니다 (참고 : 50 % 필드에 더 많은 텍스트를 추가하면 더 많은 공간이 필요함). 마지막 필드는 지속적으로 테이블을 지배합니다.

텍스트 줄 바꿈을 허용하면 공백을 이동할 수 있습니다 . 세 번째 필드의 스타일
에서 새 줄을 시작하는 유일한 방법입니다.

또는 마지막 필드에 길이를 설정할 수 있습니다. 너비 : 150 픽셀이며 처음 2 개의 필드에는 백분율을 그대로 둡니다.

도움이 되었기를 바랍니다!

단순 :

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>