Скажите, чтобы столбец таблицы не становился шире при большой ячейке?

0

Как заставить столбец таблицы не расширяться, когда ячейка большая? вот демонстрация. white-space:nowrap; bc Я хочу одну строку. text-overflow:ellipsis; для эллипсиса я хочу (чего он не делает) и overflow:hidden всякий случай. Он полностью игнорирует мой переполнение и многоточие. Демо показывает проблему (firefox 27 и chrome)

http://jsfiddle.net/Bp44m/1/

<table>
    <tbody><tr>
        <th>Firstname</th>
        <th class="lastname">Lastname</th>      
        <th>Points</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>      
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td class="lastname">I am a jerk I am a jerk I am a jerk I am a jerk I am a jerk I am a jerk I am a jerk I am a jerk</td>       
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>        
        <td>80</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>        
        <td>67</td>
    </tr>
</tbody></table>

CSS:

table,th,td
{
border:1px solid black;
}

table { width: 800px }
.lastname { width: 300px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:red;}
Теги:
table

2 ответа

1
Лучший ответ

Вы можете добавить table-layout: fixed; к элементу <table>, чтобы задать ширину таблицы/столбцов по ширине первой строки ячеек.

Пример здесь

table { table-layout: fixed; }

17.5.2 Алгоритмы ширины таблицы: свойство "table-layout"

Свойство table-layout управляет алгоритмом, используемым для размещения ячеек, строк и столбцов таблицы

fixed Использовать алгоритм размещения фиксированной таблицы

Где спецификация заявляет:

17.5.2.1 Фиксированная схема таблицы

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

0

CSS:

table,th,td
{
border:1px solid black;
}

table { width: 800px }
.lastname { word-wrap: break-word; width: 300px;  color:red;}

}

Используйте word-warp: break-word; внутри вашего класса .lastname

вот скрипка: http://jsfiddle.net/5VKZ6/

  • 0
    Это больше не одна строка, если я делаю это так

Ещё вопросы

Сообщество Overcoder
Наверх
Меню