[html] 고정 테이블 셀 너비
많은 사람들이 여전히 테이블을 사용하여 컨트롤, 데이터 등을 레이아웃합니다. 이것의 예로는 인기있는 jqGrid가 있습니다. 그러나 내가 설득 할 수없는 마술이 있습니다 (크게 울부 짖는 테이블, 얼마나 많은 마술이있을 수 있습니까?)
테이블의 열 너비를 설정하고 jqGrid처럼 준수하는 방법은 무엇입니까? 이것을 복제하려고하면 모든 <td style='width: 20px'>
셀을 설정하더라도 셀 중 하나의 내용이 20px를 초과하면 셀이 확장됩니다!
아이디어 나 통찰력이 있습니까?
답변
당신은 사용을 시도 할 수 <col>
있는 모든 행에 대한 관리 태그를 테이블 스타일을하지만 당신은 설정해야합니다 table-layout:fixed
온 스타일 <table>
또는 테이블 CSS 클래스 및 설정 overflow
세포에 대한 스타일을
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
<table class="fixed">
<col width="20px" />
<col width="30px" />
<col width="40px" />
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
그리고 이것은 당신의 CSS입니다
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
답변
이제 HTML5 / CSS3에서는 문제에 대한 더 나은 솔루션을 제공합니다. 제 생각에는이 순전히 CSS 솔루션이 권장됩니다.
table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
<table class="fixed">
<tr>
<td>Veryverylongtext</td>
<td>Actuallythistextismuchlongeeeeeer</td>
<td>We should use spaces tooooooooooooo</td>
</tr>
</table>
테이블을 설정해야합니다 width
심지어 을 haunter의 솔루션 . 그렇지 않으면 작동하지 않습니다. vsync가 제안한
새로운 CSS3 기능 은 다음과 같습니다 . 공백없이 단어를 여러 줄로 나눕니다. 다음과 같이 코드를 수정하십시오.word-break:break-all;
table.fixed { table-layout:fixed; width:90px; word-break:break-all;}
최종 결과
답변
table td
{
table-layout:fixed;
width:20px;
overflow:hidden;
word-wrap:break-word;
}
답변
나는 하나의 긴 테이블 td 셀을 가지고 있는데, 이것은 테이블을 브라우저의 가장자리로 향하게하고 추악하게 보였다. 방금 해당 열을 고정 크기로하고 지정된 너비에 도달하면 단어를 나누기를 원했습니다. 그래서 이것은 나를 위해 잘 작동했습니다 :
<td><div style='width: 150px;'>Text to break here</div></td>
table, tr 요소에 어떤 종류의 스타일도 지정할 필요가 없습니다. overflow : hidden;을 사용할 수도 있습니다. 다른 답변에서 제안한 것처럼 초과 텍스트가 사라집니다.
답변
table {
table-layout:fixed; width:200px;
}
table tr {
height: 20px;
}
10×10
답변
FULLSCREEN 너비 테이블의 경우 :
-
테이블 너비는 100 % 여야합니다.
-
만약 N 개의 집단이 필요하다면, TH는 N + 1이어야한다
3 열의 예 :
table.fixed {
table-layout: fixed;
width: 100%;
}
table.fixed td {
overflow: hidden;
}
<table class="fixed">
<col width=20 />
<col width=20 />
<col width=20 />
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>FREE</th>
</tr>
<tr>
<td>text111111111</td>
<td>text222222222</td>
<td>text3333333</td>
</tr>
</table>
답변
table
{
table-layout:fixed;
}
td,th
{
width:20px;
word-wrap:break-word;
}
: first-child … : nth-child (1) 또는 …