CSS таблица td ширина - фиксированная, не гибкая - PullRequest
Новая
       0

CSS таблица td ширина - фиксированная, не гибкая

62 голосов
/ 12 июля 2011

У меня есть таблица, и я хочу установить фиксированную ширину 30 пикселей на тд. проблема в том, что когда текст в тд слишком длинный, тд растягивается шире 30px. 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>

Ответы [ 8 ]

81 голосов
/ 12 июля 2011

Это не самый красивый 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>
44 голосов
/ 17 апреля 2012

Вы также можете попробовать использовать это: 

table {
    table-layout:fixed;
}
table td {
    width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
}

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

28 голосов
/ 04 ноября 2012

Растет не только табличная ячейка , но и сама таблица может расти. Чтобы избежать этого, вы можете присвоить таблице фиксированную ширину, которая, в свою очередь, вынуждает ширину ячейки уважаться: 

table {
  table-layout: fixed;
  width: 120px; /* Important */
}
td {
  width: 30px;
}

(использование overflow: hidden и / или text-overflow: ellipsis необязательно, но настоятельно рекомендуется для улучшения визуального восприятия)

Таким образом, если ваша ситуация позволяет вам назначить фиксированную ширину вашей таблице, это решение может быть лучшей альтернативой другим ответам (которые работают с фиксированной шириной или без нее)

11 голосов
/ 16 июня 2013

Вышеуказанные предложения уничтожили макет моей таблицы, поэтому я использовал: 

td {
  min-width: 30px;
  max-width: 30px;
  overflow: hidden;
}

Поддерживать это ужасно, но это было проще, чем заново выполнить все существующие CSS для сайта. Надеюсь, это поможет кому-то еще.

0 голосов
/ 16 декабря 2015

Просто поделите количество тд на 100%.Например, у вас есть 4 тд: 

<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% в каждом тд, чтобы максимизировать 100% пространства всей таблицы

0 голосов
/ 09 октября 2014

Chrome 37. для нефиксированного table: 

td {
    width: 30px
    max-width: 30px;
    overflow: hidden;
}

первые два важных!остальное - утекает!

0 голосов
/ 16 сентября 2014

Поместите div внутрь td и присвойте div
следующий стиль width:50px;overflow: hidden; Jsfiddle link 

<td>
  <div style="width:50px;overflow: hidden;"> 
    <span>A long string more than 50px wide</span>
  </div>
</td>
0 голосов
/ 24 сентября 2013

Этот обходной путь работал для меня ... 

<td style="white-space: normal; width:300px;">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...