CSS-таблица td width - фиксированная, не гибкая
У меня есть таблица, и я хочу установить фиксированную ширину 30 пикселей на тд. проблема в том, что когда текст в тд слишком длинный, тд растягивается шире, чем на 30 пикселей. Overflow:hidden
не работает ни на тд, мне нужен какой-то способ скрыть переполненный текст и сохранить ширину тд 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>
Ответы
Ответ 1
Это не самый красивый 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>
Ответ 2
вы также можете попытаться использовать это:
table {
table-layout:fixed;
}
table td {
width: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
http://www.w3schools.com/cssref/pr_tab_table-layout.asp
Ответ 3
Увеличивается не только ячейка таблицы, но и сама таблица.
Чтобы этого избежать, вы можете назначить фиксированную ширину таблицы, которая в свою очередь вынуждает ширину ячейки:
table {
table-layout: fixed;
width: 120px; /* Important */
}
td {
width: 30px;
}
(Использование overflow: hidden
и/или text-overflow: ellipsis
является необязательным, но рекомендуется для лучшего визуального восприятия)
Итак, если ваша ситуация позволяет назначить фиксированную ширину вашей таблице, это решение может быть лучшей альтернативой другим данным ответам (которые работают с фиксированной шириной или без нее)
Ответ 4
Вышеуказанные предложения испортили расположение моей таблицы, поэтому я закончил использование:
td {
min-width: 30px;
max-width: 30px;
overflow: hidden;
}
Это ужасно для поддержания, но было проще, чем повторять все существующие css для сайта. Надеюсь, это поможет кому-то другому.
Ответ 5
Хром 37.
для нефиксированного table
:
td {
width: 30px;
max-width: 30px;
overflow: hidden;
}
первые два важных! остальное - его утечка!
Ответ 6
Это обходное решение сработало для меня...
<td style="white-space: normal; width:300px;">
Ответ 7
Поместите a div
внутри td
и дайте следующий стиль width:50px;overflow: hidden;
в div
ссылка Jsfiddle
<td>
<div style="width:50px;overflow: hidden;">
<span>A long string more than 50px wide</span>
</div>
</td>
Ответ 8
Просто разделите количество td на 100%. Например, у вас есть 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>
Мы используем 25% в каждом td, чтобы максимально увеличить 100% всей таблицы.