Таблица с фиксированным размером ячеек

@Григорий Карпов · Регистрация: 14.07.2012

Author24 — интернет-сервис помощи студентам

На странице есть таблица с большим количеством ячеек, в одних немного текста, а в других, наоборот, много. В итоге таблица получается очень большая. Как сделать размеры её ячеек фиксированными, чтобы текст обрезался (скрывался), если он целиком не помещается?

@fol · 06.06.2015, 23:04

тут написано, как сделать

@Григорий Карпов · 16.06.2015, 20:07 **[ТС]**

Сообщение от fol

тут написано, как сделать

Делаю как там написано:

HTML5

<table style="border: 1px solid black; table-layout: fixed;" >  
    <tr>
        <td style="width: 200px; height: 50px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    </tr>
</table>

Результат такой:

В то время, как мне нужно, чтобы высота была 50 пикселей. Я решал проблему при помощи помещения содержимого ячеек в блок div, но это слишком сильно увеличивает код, потому что таблица довольно большая.

@Григорий Карпов · 17.06.2015, 00:41 **[ТС]**

Добавил свойство ячейки "display: block" - заработало.

Добавлено через 3 часа 13 минут
...Точнее нужно использовать "inline-block", чтобы ячейки не переносились на новую строку. Только теперь, если ячеек больше, чем может поместиться на экран, то они все-таки переносятся на новую строку и границы "толстые". Приходится вручную устанавливать ширину таблицы, чтобы ячейки не переносились:

HTML5

<style type="text/css">
    table {
        width: 5000px;
        border-collapse: collapse;
    }
    td {
        padding: 0;
        width: 200px;
        height: 37px;
        display: inline-block;
        overflow: hidden;
        border: 1px solid black;
    }
</style>
<table>
    <tr>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
    </tr>
</table>

Как бы это все исправить?

@Григорий Карпов 4 / 4 / 1 Регистрация: 14.07.2012 Сообщений: 212
		1
	Таблица с фиксированным размером ячеек 06.06.2015, 21:52. Показов 1282. Ответов 3 Метки нет (Все метки) На странице есть таблица с большим количеством ячеек, в одних немного текста, а в других, наоборот, много. В итоге таблица получается очень большая. Как сделать размеры её ячеек фиксированными, чтобы текст обрезался (скрывался), если он целиком не помещается? 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	06.06.2015, 23:04	2
	тут написано, как сделать 0

	17.06.2015, 00:41