내용에 셀 너비 맞춤

내용에 셀 너비 맞춤

다음 마크업을 고려할 때, 어떻게 CSS를 사용하여 하나의 셀(열에 있는 모든 셀)이 확장(기본 동작)이 아닌 콘텐츠 폭에 맞도록 할 수 있습니까?

td.block {
  border: 1px solid black;
}

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

저는 너비를 하드 코딩할 수 있다는 것을 알지만, 저는 그렇게 하지 않는 것이 낫습니다. 왜냐하면 그 열에 들어갈 내용은 동적이기 때문입니다.

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

당신의 질문을 이해할 수 있을지 모르겠지만 시도해 보겠습니다.

td {
    border: 1px solid #000;
}

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

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

설정

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

당신의 문제를 해결할 것입니다.

저에게 이것은 테이블과 해당 열에 대한 최고의 자동 맞춤 및 자동 크기입니다(css!important... 사용).없을 수 없는 경우에만)

.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 너비를 지정하지 마십시오.테이블 내용이 더 크면 화면 크기로 이동합니다.

이것을 할 수 있는 많은 방법들이 있습니다!

제가 틀렸다면 정정해 주세요. 하지만 문제는 이런 종류의 결과를 찾는 것입니다.

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

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

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

또는 마지막 필드에 길이(예: 너비:150인치)를 설정하고 처음 두 필드에 백분율을 남길 수 있습니다.

이것이 도움이 되길 바랍니다!

제가 알 수 있는 모든 사양에 따라 CSS 폭을 요소의 1% 또는 100%로 설정하는 것은 부모와 관련이 있습니다.글을 쓰는 순간의 Blink Rendering Engine(크롬)과 Gecko(Firefox)는 1% 또는 100%(열을 축소하거나 사용 가능한 공간을 채우도록 함)를 잘 처리하는 것처럼 보이지만, 제대로 렌더링할 수 있는 모든 CSS 사양에 따라 보장되지는 않습니다.

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

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

그것은 새로운 브라우저에서 작동합니다.IE11+ 기사 하단의 표 참조.

먼저 설정

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

테이블 셀이 늘어나도록 합니다.

이제 필요한 것은

td.fit {
  width: 0;
  min-width: fit-content;
}

당신의 감방에서.

들어갈 경우에만 테이블 .100%.

table {
  white-space: nowrap;
  width: 100%;
}

td {
  border: 1px solid black;
}

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

td.fit {
  width: 0;
  min-width: fit-content;
}

<table>
  <tr>
    <td class="stretch">this should stretch</td>
    <td class="stretch">this should stretch</td>
    <td class="fit">this should be the content width</td>
  </tr>
</table>

일부 시나리오에서는 이 방법이 효과가 있을 수 있습니다.제가 우연히 발견한 것 중 하나는 내용에 맞는 모든 td 태그가 필요할 때였습니다.수평 공간의 나머지 부분을 비워 둡니다.제가 한 일은 다음과 같습니다.

table {
  width: 100%;
  background-color: Cornflowerblue;
}

td {
  border: 1px solid lightyellow;
  white-space: nowrap;
}

td:last-child {
  width: 100%;
  /*hiding border*/
  border: none;
}

<table>
  <tr>
    <td>
      Content 1
    </td>
    <td>
      Content 2
    </td>
    <td>
    </td>
  </tr>
</table>

단순:

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

언급URL : https://stackoverflow.com/questions/11267154/fit-cell-width-to-content