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

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

хром 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 тд:

<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