[html] 백분율을 사용하여 표 셀의 최대 너비를 어떻게 설정할 수 있습니까?

Program / 글쓴이 
<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

위는 작동하지 않습니다. 백분율을 사용하여 표 셀의 최대 너비를 어떻게 설정할 수 있습니까?

답변

CSS 2.1 사양 의 max-width 정의에 따르면 “테이블, 인라인 테이블, 테이블 셀, 테이블 열 및 열 그룹에 대한 ‘최소 너비’및 ‘최대 너비’의 효과는 정의되지 않았습니다.” 따라서 td 요소에 최대 너비를 직접 설정할 수 없습니다.

두 번째 열이 최대 67 %를 차지하도록하려면 너비 (테이블 셀의 경우 사실상 최소 너비)를 33 %로 설정할 수 있습니다 (예 : 예제의 경우).

td:first-child { width: 33% ;}

두 열 모두에 대해 설정하면 브라우저가 열 너비를 동일하게 만드는 경향이 있기 때문에 잘 작동하지 않습니다.

답변

내가 아는 오래된 질문이지만 이제는 table-layout: fixed테이블 태그 의 css 속성 을 사용하여 가능 합니다. 이 질문에서 아래 답변 표 셀의 CSS 백분율 너비 및 텍스트 오버플로

를 사용 table-layout: fixed하면 쉽게 할 수 있지만이 CSS 속성에 대해 아는 사람이 많지 않기 때문에 약간 까다 롭습니다.

table {
  width: 100%;
  table-layout: fixed;
}

여기에서 업데이트 된 바이올린에서 실제로 확인하십시오 : http://jsfiddle.net/Fm5bM/4/

답변

나는 이것이 말 그대로 1 년 후라는 것을 알고 있지만 나는 나눌 것이라고 생각했다. 나는 똑같은 일을하려고 노력하고 있었고 나를 위해 일한이 솔루션을 발견했습니다. 전체 테이블의 최대 너비를 설정 한 다음 원하는 효과를 위해 셀 크기로 작업했습니다.

테이블을 자체 div에 넣은 다음 전체 테이블에 대해 원하는대로 div의 너비, 최소 너비 및 / 또는 최대 너비를 설정합니다. 그런 다음 다른 셀의 너비와 최소 너비를 작업하고 설정할 수 있으며 div의 최대 너비는 효과적으로 주변 및 역방향으로 작업하여 원하는 최대 너비를 얻을 수 있습니다.

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

그런 다음 스타일에 다음을 입력하십시오.

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

물론 이것은 셀 자체의 “최대”너비를 제공하지는 않지만 이러한 옵션 대신 작동 할 수있는 일부 제어를 허용합니다. 귀하의 필요에 맞는지 확실하지 않습니다. 페이지의 내비게이션 측면이 일정 지점까지 확대 및 축소되기를 원하는 상황에서 효과가 있었지만 요즘에는 모든 와이드 스크린에서 작동한다는 것을 알고 있습니다.

답변

백분율은 절대 크기에 상대적이어야합니다. 다음을 시도하십시오.

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>

답변