테이블 셀의 최대 높이를 설정하는 방법은 무엇입니까?

developer tip

테이블 셀의 최대 높이를 설정하는 방법은 무엇입니까?

optionbox 2020. 11. 14. 10:07

테이블 셀의 최대 높이를 설정하는 방법은 무엇입니까?

너비와 높이가 고정 된 테이블 셀이 있고 텍스트가 너무 크면 셀 크기가 동일하게 유지되어야하며 텍스트는 overflow : hidden으로 숨겨져 야합니다.

div {
   display: table-cell
   height: 100px;
   width: 100px;
   overflow: hidden;
   vertical-align: middle;
}

그러나 테이블 셀은 너무 많은 텍스트가 추가되면 100px 이상으로 확장됩니다. 확장을 막는 트릭이 있습니까?

텍스트 길이는 여러 줄이어야하므로 "white-space : nowrap"솔루션은 적용 할 수 없습니다.

함으로써 CSS 규칙 2.1 표 셀의 높이를 "콘텐츠에 필요한 최소 높이"이다. 따라서 내부 마크 업, 일반적으로 div요소 ( <td><div>content</div></td>), 요소의 집합 height및 overflow속성을 사용하여 간접적으로 높이를 제한해야합니다 ( 물론 높이가 CSS 2.1 테이블 셀 규칙을 따르도록 div설정하지 않음 display: table-cell).

나는 받아 들여지는 대답이 실제로 문제를 완전히 해결한다고 생각하지 않습니다. 당신은이 싶었다 vertical-align: middle테이블 셀의 내용. 그러나 테이블 셀 내부에 div를 추가하고 높이를 지정하면 내부 DIV의 내용이 맨 위에 있습니다. 이 jsfiddle을 확인하십시오 . 오버플로 : 숨겨진; 잘 작동하지만 한 줄로만 콘텐츠를 줄이면이 줄 이 세로로 중앙에 배치되지 않습니다.

해결책은 테이블 셀 내부에 DIV를 추가하는 것이 아니라 외부에 추가하는 것입니다. 코드는 다음과 같습니다 .

/* some wrapper */
div.d0 {
    background: grey;
    width:200px;
    height: 200px;
}

div.table {
    margin: 0 auto; /* just cosmetics */
    width: 150px;
    height: 150px;
    background: #eee;
    display: table;
}

div.tablecell {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 100%;
    width: 100%;
    background: #aaa;
}

div.outer-div {
    height: 150px;
    overflow: hidden;
}

<div class="d0">
    <div class="outer-div">
        <div class="table">
            <div class="tablecell">
                Lorem ipsum 
                <!--dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,-->
            </div>
        </div>
    </div>
</div>

다음 중 하나를 수행 할 수 있습니다.

CSS 속성 "line-height"를 사용하고 테이블 행 () 당 설정합니다. 이렇게하면 콘텐츠가
"display"css 속성을 "block"으로 설정하고 다음과 같이 설정합니다.

td 
{
  display: block;
  overflow-y: hidden;
  max-height: 20px;
}

행운을 빕니다!

다음과 같이 시도하십시오.

 table {
    width: 50%;
    height: 50%;
    border-spacing: 0;
    position:absolute;
}
td {
    border: 1px solid black;
}
#content {
    position:absolute;
    width:100%;
    left:0px;
    top:20px;
    bottom:20px;
    overflow: hidden;
}

CSS에서는 테이블 셀 최대 높이를 설정할 수 없으며 공백을 공백으로 처리하면 최대 너비로 분할 할 수 없으므로 솔루션은 모든 브라우저에서 작동하는 자바 스크립트입니다.

그래서 이것은 당신을 위해 일할 수 있습니다.

Javascript로 테이블에있는 모든 셀 또는 행의 최대 높이 제한 :

이 스크립트는 수평 오버 플로우 테이블에 적합합니다.

이 스크립트는 행이 max-height (160px)로 줄어들 때까지 매번 테이블 너비를 300px, 최대 4000px 늘립니다. 필요에 따라 숫자를 편집 할 수도 있습니다.

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

출처 : HTML 테이블 솔루션 테이블 너비를 늘려 행 또는 셀의 최대 높이 제한, Javascript

시험

   <td style="word-wrap: break-word">Long text here</td>

아래 스타일을 사용하십시오.

div {
  display: fixed;
  max-height: 100px;
  max-width: 100px;
  overflow: hidden;
}

HTML은 다음과 같습니다.

<div>
    your long text here
</div>

display : table-cell을 사용하는 경우 max-height는이 스타일의 div에 대해 작동하지 않습니다. 그래서 나를 위해 일한 해결책은 내부 div의 최대 높이를 설정하는 것입니다.

<div class="outer_div" style="display:table">

    <div class="inner_div" style="display:table-cell">
        <img src="myimag.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>
    <div class="inner_div" style="display:table-cell">
        <img src="myimag2.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>

</div>

이것이 당신의 필요에 맞을까요?

<style>
.scrollable {
  overflow-x: hidden;
  overflow-y: hidden;
  height: 123px;
  max-height: 123px;
}
</style>

<table border=0><tr><td>
  A constricted table cell
</td><td align=right width=50%>
  By Jarett Lloyd
</td></tr><tr><td colspan=3 width=100%>
  <hr>
  you CAN restrict the height of a table cell, so long as the contents are<br>
  encapsulated by a `&lt;div>`<br>
  i am unable to get horizontal scroll to work.<br>
  long lines cause the table to widen.<br>
  tested only in google chrome due to sheer laziness - JK!!<br>
  most browsers will likely render this as expected<br>
  i've tried many different ways, but this seems to be the only nice way.<br><br>
</td></tr><tr><td colspan=3 height=123 width=100% style="border: 3px inset blue; color: white; background-color: black;">
  <div class=scrollable style="height: 100%; width: 100%;" valign=top>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
  </div>

이것이 당신이 원하는 것입니다.

td {
   max-height: whatever;
   max-width: whatever;
   overflow: hidden;
}

참고URL : https://stackoverflow.com/questions/13667941/how-to-set-maximum-height-for-table-cell

'developer tip' 카테고리의 다른 글

JavaScript : 문자열 부울 값 구문 분석? (0)	2020.11.14
Vim에서 다른 텍스트 열 뒤에 텍스트 열을 어떻게 붙여 넣나요? (0)	2020.11.14
JavaFX-setVisible은 요소를 "숨기지"않습니다. (0)	2020.11.14
정수가 범위 내에 있는지 확인하는 방법은 무엇입니까? (0)	2020.11.13
Aptana Studio 3에서 원격 호스트에 연결하는 방법 (0)	2020.11.13

현재글테이블 셀의 최대 높이를 설정하는 방법은 무엇입니까?

optionbox

테이블 셀의 최대 높이를 설정하는 방법은 무엇입니까?

테이블 셀의 최대 높이를 설정하는 방법은 무엇입니까?

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

티스토리툴바

테이블 셀의 최대 높이를 설정하는 방법은 무엇입니까?

테이블 셀의 최대 높이를 설정하는 방법은 무엇입니까?

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

관련글

티스토리툴바