[html] 포함하는 표의 전체 너비를 채우기위한 동일한 크기의 표 셀

Program / 글쓴이

HTML / CSS (상대적 크기 조정 포함)를 사용하여 셀 행이 포함 된 테이블의 전체 너비를 늘리도록 만드는 방법이 있습니까?

셀은 너비가 같아야하며 외부 테이블 크기도 <table width="100%">.

현재 고정 크기를 지정하지 않으면; 셀은 내용에 맞게 자동 크기 조정됩니다.

답변

셀에 대해 특정 너비를 설정할 필요도 없으며 table-layout: fixed셀을 고르게 퍼뜨리는 것으로 충분합니다.

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;
}
<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

스 니펫 확장

for table-layout작업하려면 테이블 스타일 요소에 너비가 설정되어 있어야합니다 (예에서는 100 %).

답변

백분율 너비와 고정 테이블 레이아웃을 사용하십시오 .

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

와

table { table-layout: fixed; }
td { width: 33%; }

고정 테이블 레이아웃은 중요합니다. 그렇지 않으면 내용이 맞지 않는 경우 브라우저가 너비를 조정합니다. 즉, 너비가 고정 된 테이블 레이아웃이없는 규칙이 아닌 제안입니다.

당연히 상황에 맞게 CSS를 조정해야합니다. 이는 일반적으로 주어진 클래스가 있거나 주어진 ID가있는 테이블에만 스타일을 적용하는 것을 의미합니다.

답변

사용 table-layout: fixed하는 속성으로 table하고 width: calc(100%/3);용 td( 가정 3이있다 td의 ). 이 두 속성을 설정하면 테이블 셀의 크기 가 동일 해집니다.

데모를 참조하십시오 .

답변