it-roy-ru.com

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

У меня есть таблица, и я хочу установить фиксированную ширину 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>
62
Richard Westington

Это не самый красивый 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>
81
Cᴏʀʏ

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

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

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

44
Dmitri

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

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

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

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

28
Daniel Rikowski

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

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

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

10
Precastic

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

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

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

0
befzz