TR의 높이를 고정하는 방법은 무엇입니까?

102

테이블의 행 높이 (tr)를 고정 할 수 있습니까?

브라우저 창을 축소하면 문제가 나타나고 일부 행이 재생되기 시작하며 행의 높이를 수정할 수 없습니다.

여러 가지 방법을 시도했습니다. tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

IE7을 사용하고 있습니다.

스타일

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

HTML 코드.

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>
html  html-table  row 
— 암라
소스

답변:

97

높이를 고정하고 텍스트를 감싸지 않는 경우 테이블은 (적어도 IE에서는) 불완전합니다. 유일한 해결책은 div다음과 같이 요소 내부에 텍스트를 넣는 것입니다.

td.container > div {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
td.container {
    height: 20px;
}
<table>
    <tr>
        <td class="container">
            <div>This is a long line of text designed not to wrap 
                 when the container becomes too small.</div>
        </td>
    </tr>
</table>
스 니펫 확장

이런 식으로 div의 높이는 포함하는 셀의 높이이며 텍스트는를 늘릴 수 없으므로 div창 크기에 관계없이 셀 / 행의 높이를 동일하게 유지합니다.

— 앤디 E
소스
1
조언을 해주셔서 감사합니다. 작동하는 것 같지만 조금 지저분 해 보입니다.
— Amra
기꺼이 도와 드리겠습니다 :-) 불행히도, 지저분한 코드는 일반적으로 해킹 및 해결 방법의 경우입니다.
— Andy E
나는 [code] .container {width : 100 %; 최대 높이 : 40px; 오버플로 : 숨김; } [/ code] 및 [code] <div class = 'container'> </ div> [/ code].
— Cees Timmerman
동일한 방법을 사용하여 <th> 태그 안에 div를 넣었고 잘 작동했습니다. 이 문제는 Chrome에서만 발생했습니다. FFox, Safari 및 IE는 테이블 헤더에 설정된 높이를 잘 지원했습니다. 공유해 주셔서 감사합니다! :)
— Mário Rodrigues
사파리에서는 작동하지 않습니다. td뿐만 아니라 div에서도 실제 높이와 너비를 설정해야합니다.
— Radu Simionescu
15

다음과 같이 셀 중 하나에 높이를 입력합니다.

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

그러나 콘텐츠에 필요한 것보다 셀을 작게 만들 수는 없습니다. 이 경우 먼저 텍스트를 더 작게 만들어야합니다.

— 찌름
소스
1
html 속성에 "px"를 사용하지 않으실 것이라고 확신합니다.
— unflores
10
스타일 속성에서 사용할 수 있다고 확신합니다.
— Burak Dobur 2016
11

td높이를 콘텐츠 의 자연 높이 보다 낮게 설정

표 셀은 내용을 포함 할 수있을만큼 충분히 커야하기 때문에 내용에 명백한 높이가 없으면 셀의 크기를 임의로 조정할 수 있습니다.

셀의 크기를 조정하여 행 높이를 제어 할 수 있습니다.

이렇게하는 한 가지 방법은,과 내용 설정하는 것입니다 absolute내 위치 relative셀 및 설정 height세포의과 left및 top내용의.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}
<table><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
스 니펫 확장

table-layout특성

위의 스 니펫의 두 번째 표가 table-layout: fixed적용되어 상위 내에서 콘텐츠에 관계없이 셀에 동일한 너비가 제공됩니다.

caniuse.com 에 따르면 table-layout2019 년 9 월 12 일 현재 사용과 관련하여 중요한 호환성 문제는 없습니다 .

또는width 세 번째 표에서와 같이 특정 셀에 적용 하십시오.

이러한 방법을 사용하면 적용 position: absolute하여 생성 된 효과적인 크기가없는 콘텐츠를 포함하는 셀에 임의의 둘레를 지정할 수 있습니다.

훨씬 더 간단하게 ...

나는 이것을 처음부터 정말로 생각 했어야했다. 모든 일반적인 방법으로 블록 레벨 테이블 셀 내용을 조작 할 수 있으며를 사용 하여 내용의 원래 크기를 완전히 파괴하지 않고 position: absolute테이블에서 너비가 무엇인지 파악할 수 있습니다.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}
<table><tbody>
  <tr class="cap-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
  </tr>
</tbody></table>
스 니펫 확장

— 프레드 간트
소스
마침내 유망 해 보이는 대답! 일하러 가자 마자 시도 해봐야 겠어요. 잊지 않으면 피드백을 드리겠습니다.
— jeromej
1
매력처럼 일했다! (그것이 제거 text-align: center및 기타 센터링 트릭을 수행한다는 경고 ...에 의존 position: absolute)
— jeromej
이것은 내 경우 높이에 대해 작동하지만을 사용할 때 postion: absolute자동 셀 너비가 손실됩니다. 행 높이를 제어하면서 테이블에서 셀 너비를 올바르게 계산하는 방법을 찾으려고합니다. 이견있는 사람?
— ash
@ash-콘텐츠의 크기를 효과적으로 파괴 한 후 완전 자동 너비를 유지할 방법을 즉시 생각하지는 않지만 테이블 셀을 임의로 넓게 만들 수 있습니다. 도움이 될 수있는 한 가지 방법을 보여주기 위해 예제 스 니펫을 확장했습니다. 나는 그것에 대해 좀 더 생각하고 유용한 것이
— 떠오르면
감사합니다 프레드. 열에 고정 된 크기를 제공하기 위해 헤더 (<th>)를 사용할 수 있지만 헤더가 너무 좁거나 너무 넓을 수 있다는 점에 유의하십시오.
— ash
8

div를 td 안에 넣으면 저에게 효과적이었습니다. 

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>
— user2987600
소스
2

테이블 너비는 컨테이너에 상대적인 90 %입니다.

페이지를 꽉 쥐면 테이블 너비도 꽉 조이는 것입니다. 셀의 너비도 줄어들고 브라우저는 높이를 늘려 보정합니다.

높이를 변경하지 않으려면 셀의 너비가 의도 한 콘텐츠를 유지할 수 있는지 확인해야합니다. 테이블 너비를 고정하는 것은 아마도 시도하고 싶은 것일 것입니다. 또는 테이블의 최소 너비를 가지고 놀 수도 있습니다.

— 알았어
소스
1

원하는 결과를 얻으려면 이렇게해야했습니다.

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

셀 또는 div에서만 작동하는 것을 거부했으며 둘 다 필요했습니다.

— 젠
소스
-5

그것은 단어가 줄 바꿈되고 새 줄로 진행되어 TR을 늘이기 때문입니다. 이렇게하면 문제가 해결됩니다.

overflow:hidden;

그것을 TR 스타일에 넣으십시오. 작동해야하지만 그냥 늘려 두는 것은 어떨까요?

추신. 나는 그것을 테스트하지 않았으므로 XD를 싫어하지 않는다.

— 오지
소스
3
싫어하지는 않지만 IE의 TD 요소가 지원하는 스타일 목록은 msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx 입니다. overflow그들 중 하나가 아닙니다.
— Andy E
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.