테이블 행 오버플로를 숨기는 방법?
텍스트 데이터가 너무 커서 맞지 않는 HTML 테이블이 있습니다. 따라서이를 수용하기 위해 셀을 수직으로 확장합니다. 이제 오버플로가있는 행은 데이터 양이 적은 행의 두 배입니다. 이것은 용납 할 수 없습니다. 테이블의 행 높이가 같도록하려면 어떻게해야 1em합니까?
다음은 문제를 재현하는 몇 가지 마크 업입니다. 표는 넘쳐나는 텍스트를 숨기고 한 줄의 높이 여야합니다.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { width:250px; }
table tr { height:1em; overflow:hidden; }
</style>
</head>
<body>
<table border="1">
<tr>
<td>This is a test.</td>
<td>Do you see what I mean?</td>
<td>I hate this overflow.</td>
</tr>
</table>
</body>
</html>
셀 과 셀 table-layout:fixed에 두 개의 속성을 지정해야합니다 . 당신은 또한 셀로 이동해야합니다tablewhite-space:nowrap;overflow:hidden;
table { width:250px;table-layout:fixed; }
table tr { height:1em; }
td { overflow:hidden;white-space:nowrap; }
여기에 데모가 있습니다. Firefox 3.5.3 및 IE 7에서 테스트 됨
일반적으로 사용 white-space: nowrap;하는 경우 어떤 열에 셀을 감싸거나 늘리는 내용이 포함될 것인지 알고 있기 때문일 것입니다. 이러한 열의 경우 일반적으로 셀의 내용을 span특정 class속성 으로 감싸고 특정 width.
예:
HTML :
<td><span class="description">My really long description</span></td>
CSS :
span.description {
display: inline-block;
overflow: hidden;
white-space: nowrap;
width: 150px;
}
대부분의 최신 브라우저에서 이제 다음을 지정할 수 있습니다.
<table>
<colgroup>
<col width="100px" />
<col width="200px" />
<col width="145px" />
</colgroup>
<thead>
<tr>
<th>My 100px header</th>
<th>My 200px header</th>
<th>My 145px header</th>
</tr>
</thead>
<tbody>
<td>100px is all you get - anything more hides due to overflow.</td>
<td>200px is all you get - anything more hides due to overflow.</td>
<td>100px is all you get - anything more hides due to overflow.</td>
</tbody>
</table>
그런 다음 위 게시물의 스타일을 다음과 같이 적용하면 :
table {
table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
overflow: hidden;
white-space: nowrap;
}
결과는 테이블 전체에 걸쳐 멋지게 숨겨진 오버플로를 제공합니다. 최신 Chrome, Safari, Firefox 및 IE에서 작동합니다. 나는 9 이전에 IE에서 테스트하지 않았지만 내 생각에는 7까지 작동 할 것이며 5.5 또는 6 지원을 볼만큼 운이 좋을 수도 있습니다. ;)
Here´s something I tried. Basically, I put the "flexible" content (the td which contains lines that are too long) in a div container that´s one line high, with hidden overflow. Then I let the text wrap into the invisible. You get breaks at wordbreaks though, not just a smooth cut-off.
table {
width: 100%;
}
.hideend {
white-space: normal;
overflow: hidden;
max-height: 1.2em;
min-width: 50px;
}
.showall {
white-space:nowrap;
}
<table>
<tr>
<td><div class="showall">Show all</div></td>
<td>
<div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div>
</td>
<td>
<div class="showall">Show all this too</div>
</td>
</tr>
</table>
Only downside (it seems), is that the table cell widths are identical. Any way to get around this? – Josh Stodola Oct 12 at 15:53
Just define width of the table and width for each table cell
something like
table {border-collapse:collapse; table-layout:fixed; width:900px;}
th {background: yellow; }
td {overflow:hidden;white-space:nowrap; }
.cells1{width:300px;}
.cells2{width:500px;}
.cells3{width:200px;}
It works like a charm :o)
If javascript is accepted as an answer, I made a jQuery plugin to address this issue (for more information about the issue see CSS: Truncate table cells, but fit as much as possible).
To use the plugin just type
$('selector').tableoverflow();
Plugin: https://github.com/marcogrcr/jquery-tableoverflow
Full example: http://jsfiddle.net/Cw7TD/3/embedded/result/
wrap the table in a div with class="container"
div.container {
width: 100%;
overflow-x: auto;
}
then
#table_id tr td {
white-space:nowrap;
}
result
ReferenceURL : https://stackoverflow.com/questions/1554928/how-to-hide-table-row-overflow
'program tip' 카테고리의 다른 글
| 국제 지리적 주소는 관계형 데이터베이스에 어떻게 저장되어야합니까? (0) | 2021.01.06 |
|---|---|
| VI 편집기에서 중복 된 줄을 어떻게 표시 / 강조 표시 할 수 있습니까? (0) | 2021.01.06 |
| 애니메이션으로 UITableViewCell을 추가 / 삭제 하시겠습니까? (0) | 2021.01.06 |
| LINQ에서 새로 선택을 사용하여 목록 반환 (0) | 2021.01.06 |
| iPhone 앱용 여러 테마 / 스킨을 만드는 방법은 무엇입니까? (0) | 2021.01.06 |