Получение строки таблицы указанной ширины, чтобы держать все в одной строке и обрезать одну ячейку по мере необходимости? (HTML / CSS) - PullRequest
Новая
       5

Получение строки таблицы указанной ширины, чтобы держать все в одной строке и обрезать одну ячейку по мере необходимости? (HTML / CSS)

2 голосов
/ 23 февраля 2012

У меня есть базовая таблица с четырьмя столбцами (назовем их A, B, C, D) и определенной желаемой шириной, 600 пикселей. Содержание всего текста. То, что я хочу, чтобы ширина столбцов была выделена следующим образом:

  • Колонки A-C достаточно широки, чтобы вместить текст без какой-либо обертки, не шире
  • Столбец D получает всю оставшуюся ширину и обрезает любое переполнение вместо переноса на новую строку.

Как мне это сделать с помощью CSS?

Это самое близкое, что я получил: 

    <table style="width: 600px; table-layout: fixed;">
        <thead>
            <th style="white-space: nowrap;">Column A</th>
            <th style="white-space: nowrap;">Column B</th>
            <th style="white-space: nowrap;">Column C</th>
            <th>Column D</th>
        </thead>
        <tbody>
            <tr>
                <td style="white-space: nowrap;">12345</td>
                <td style="white-space: nowrap;">Some Text</td>
                <td style="white-space: nowrap;">Some More Text</td>
                <td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">                        
                        Some very long text goes here.  This text is going to get cut off.  It won't all fit in this cell.  I hope it doesn't wrap onto a second line.  That would be bad.
                </td>
            </tr>
        </tbody>
    </table>

В этом случае ширина столбцов A, B и C не имеет никакого отношения к содержимому. Это дает ячейкам слишком много места для короткого текста и слишком мало места для длинного текста. Однако он правильно обрезает столбец D.

Я также попытался установить ширину столбцов A-C на 1% и столбца D на 100%, но затем они все слились вместе на левом краю таблицы.

Есть идеи, как я могу получить этот расчет ширины?

1 Ответ

0 голосов
/ 23 февраля 2012

Может быть, вы хотите что-то подобное http://jsfiddle.net/2qHY3/3/ ..?

удалив 

white-space: nowrap;text-overflow: ellipsis;

с последнего <td>

...