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

Program / 글쓴이

테이블의 행 높이 (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>

답변

높이를 고정하고 텍스트를 감싸지 않는 경우 테이블은 (적어도 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창 크기에 관계없이 셀 / 행의 높이를 동일하게 유지합니다.

답변

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

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

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

답변

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>

스 니펫 확장

답변

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

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

답변

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

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

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

답변

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

<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에서만 작동하는 것을 거부했으며 둘 다 필요했습니다.

답변

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

overflow:hidden;

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

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