CSS 테이블 td 너비-고정, 유연하지 않음
나는 테이블이 있고 td에 30px의 고정 너비를 설정하고 싶습니다. 문제는 td의 텍스트가 너무 길면 td가 30px보다 넓게 늘어난다는 것입니다. Overflow:hiddentd에서 작동하지 않으므로 넘치는 텍스트를 숨기고 td 너비를 30px로 유지하는 방법이 필요합니다.
<table cellpadding="0" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
가장 예쁜 CSS는 아니지만이 작업을 수행했습니다.
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
줄임표가 있거나없는 예 :
body {
font-size: 12px;
font-family: Tahoma, Helvetica, sans-serif;
}
table {
border: 1px solid #555;
border-width: 0 0 1px 1px;
}
table td {
border: 1px solid #555;
border-width: 1px 1px 0 0;
}
/* What you need: */
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
table.with-ellipsis td {
text-overflow: ellipsis;
}<table cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
<br />
<table class="with-ellipsis" cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>다음을 사용해 볼 수도 있습니다.
table {
table-layout:fixed;
}
table td {
width: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
http://www.w3schools.com/cssref/pr_tab_table-layout.asp
성장하는 것은 테이블 셀 뿐만 아니라 테이블 자체도 성장할 수 있습니다. 이를 방지하기 위해 테이블에 고정 너비를 할당하여 셀 너비를 강제로 적용 할 수 있습니다.
table {
table-layout: fixed;
width: 120px; /* Important */
}
td {
width: 30px;
}
(Using overflow: hidden and/or text-overflow: ellipsis is optional but highly recommended for a better visual experience)
So if your situation allows you to assign a fixed width to your table, this solution might be a better alternative to the other given answers (which do work with or without a fixed width)
The above suggestions trashed the layout of my table so I ended up using:
td {
min-width: 30px;
max-width: 30px;
overflow: hidden;
}
This is horrible to maintain but was easier than re-doing all the existing css for the site. Hope it helps someone else.
Chrome 37. for non fixed table:
td {
width: 30px
max-width: 30px;
overflow: hidden;
}
first two important! else - its flow away!
This workaround worked for me...
<td style="white-space: normal; width:300px;">
Put a div inside td and give following style width:50px;overflow: hidden; to the div
Jsfiddle link
<td>
<div style="width:50px;overflow: hidden;">
<span>A long string more than 50px wide</span>
</div>
</td>
Just divide the number of td to 100%. Example, you have 4 td's:
<html>
<table>
<tr>
<td style="width:25%">This is a text</td>
<td style="width:25%">This is some text, this is some text</td>
<td style="width:25%">This is another text, this is another text</td>
<td style="width:25%">This is the last text, this is the last text</td>
</tr>
</table>
</html>
We use 25% in each td to maximize the 100% space of the entire table
참고URL : https://stackoverflow.com/questions/6658947/css-table-td-width-fixed-not-flexible
'UFO ET IT' 카테고리의 다른 글
| Windows 배치 파일과 동일한 디렉토리에서 프로그램을 실행하는 방법은 무엇입니까? (0) | 2020.11.19 |
|---|---|
| 두 개의 버튼이 다른 버튼 위에있는 프로그래밍 방식으로 RelativeLayout을 만드는 방법은 무엇입니까? (0) | 2020.11.19 |
| L1 및 L2 캐시의 라인 크기 (0) | 2020.11.19 |
| URL 인코딩 된 URL에 추가 할 구문 분석 문자열 (0) | 2020.11.19 |
| 여러 작업을 실행하는 Gradle 사용자 지정 작업 (0) | 2020.11.19 |