CSS table td width - фиксированная, не гибкая

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

8 ответов

это не самый красивый 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>
76

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

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

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

41

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

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

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

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

26

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

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

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

9

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

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

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

0

этот способ работал для меня...

<td style="white-space: normal; width:300px;">
-1

поставить 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>
-1

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

<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% пространство всей таблицы

-5