Как сделать ячейку таблицы фиксированного размера, вне зависимости от контента

@gen1usqq · Регистрация: 11.12.2014

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

Вот есть некая разметка таблицы. Она предназначена чтобы на сайте было справа типо ссылки всякие, а справа само содержание статьи. По началу я сделал это и вроде всё норм, но вот решил тестануть и добавить ссылку с большим текстом, после чего результат получился как на скрине. А нужно чтобы всегда была ширина ячейки "col-md-3 col-sm-3 col-xs-2". Не понимаю как это реализовать

. На классы не смотрите, там они пока что просто для названия ибо это тест версия.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<table class="row">
    <tr class="row">
        <td class="col-md-3 col-sm-3 col-xs-2" style="background-color:#e6e6e6;vertical-align:top;">                                   
            <ul class="listOfLinksToArticles col-md-12" style="list-style:none;padding-top:15px;background-color:#e6e6e6;">
                <li class="articleCategory">Введение</li>
                <li class="linkToArticle">
                    <a href="/Home/Articles?id=5">testtesttesttesttesttesttestesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</a>
                </li>
                <li class="linkToArticle">
                    <a href="/Home/Articles?id=5">qweqeq</a>
                </li>
                <li class="linkToArticle">
                    <a href="/Home/Articles?id=5">qweqeq</a>
                </li>
                <li class="linkToArticle">
                    <a href="/Home/Articles?id=5">qweqeq</a>
                </li>
                <li class="linkToArticle">
                    <a href="/Home/Articles?id=5">qweqeq</a>
                </li>
            </ul>            
        </td>
        <td class="col-md-9 col-sm-9 col-xs-10" style="background-color:#efeeee;padding-top:25px;">
            <div class="articleContent col-md-12">
                @Html.Raw(Model.content)
            </div>
            <div class="col-md-12 text-center">
                previous content next
            </div>
            <div class="articleComments col-md-12">
                Comments
            </div>
        </td>
    </tr>
</table>

Вот только это определено в файле стилей, остальное непосредственно прописано.

CSS
1
2
3
4
TD, TH {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid black; /* Параметры рамки */
}

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

@anzarsh · 03.04.2017, 12:31

если хотите фиксированно, то укажите фиксированные размеры для table (возможно в px) и для каждой ячейки (td:first-child,...). Если ширина таблицы будет меньше суммы каждой ширины ячейки, то они будут выставляться пропорционально их значениям, но в любом случае уже не по контенту. Можно указать и в процентах.

@gen1usqq · 03.04.2017, 13:59 **[ТС]**

Да мне не нужно ФИКСИРОВАННО, ибо ширина должна меняться в зависимости от размера окна, мне нужно чтобы столбцы не растягивались при большом контенте.

В общем, я вас совсем не понял.

Qwerty_Wasd · 03.04.2017, 14:25

gen1usqq, все нормально, вас не поняли из-за того, что вы неправильно поставили вопрос.
То что вам нужно называется

CSS
1
table-layout: fixed;

Это свойство будет обрезать все, что не помещается в ячейку. Опять же если я вас правильно понял )))

Добавлено через 4 минуты
Вот здесь можно восполнить недостаток знаний. Тык. Тык.

@gen1usqq · 03.04.2017, 14:36 **[ТС]**

Да вот то что нужно, я это сам нагуглил полчаса назад, и вот вопрос, как теперь мне указать для 2 столбцов разные размеры, мне надо допустим 25% и 75%. Но не могу понять как это сделать. Вот то что у меня пока что имеется.

CSS
1
2
3
4
5
table {
  table-layout: fixed;
  word-wrap:break-word;
  width: 100%;
}

Я пробовал писать для ширины столбцов такое

CSS
1
td:first-child {width: 30%;}

и такое

CSS
1
td:first-child {width: 500px;}

и тупо 0 изменений, поэтому и спрашиваю вас.

Qwerty_Wasd · 03.04.2017, 16:31

gen1usqq, тогда вместо

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

table-layout: fixed;

используйте

CSS
1
overflow: scroll;

Добавлено через 57 секунд
И не забываем при просмотре изменений нажимать CTRL+F5 )))

Добавлено через 11 минут
.....А вообще-то должно работать. Может вы кеш не сбросили?

Вот пример

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
<tr>
    <td class="one">bla-bla-bla</td>
    <td>bla-bla-bla</td>
    <td>bla-bla-bla</td>
</tr>
<tr>
    <td>bla-bla-bla</td>
    <td class="two">bla-bla-bla</td>
    <td>bla-bla-bla</td>
</tr>
<tr>
    <td>bla-bla-bla</td>
    <td>bla-bla-bla</td>
    <td class="three">bla-bla-bla</td>
</tr>
</table>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
table{
    width:100%;
    table-layout:fixed;
}
tr, td{
border:1px red solid;
}
.one{
    height:90px;
    width:15%;
}
.two{
    height:150px;
    width:35%;
}
.three{
    height:300px;
    width:45%;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@anzarsh 9 / 8 / 7 Регистрация: 17.03.2017 Сообщений: 47
	03.04.2017, 12:31
	если хотите фиксированно, то укажите фиксированные размеры для table (возможно в px) и для каждой ячейки (td:first-child,...). Если ширина таблицы будет меньше суммы каждой ширины ячейки, то они будут выставляться пропорционально их значениям, но в любом случае уже не по контенту. Можно указать и в процентах. 0

@gen1usqq 1 / 1 / 0 Регистрация: 11.12.2014 Сообщений: 135
	03.04.2017, 13:59 [ТС]
	Да мне не нужно ФИКСИРОВАННО, ибо ширина должна меняться в зависимости от размера окна, мне нужно чтобы столбцы не растягивались при большом контенте. В общем, я вас совсем не понял. 0