Пример использования свойства CSS table-layout.

Таблица со столбиками разной ширины

Как сделать таблицу с частью столбиков разной, а частью одинаковой ширины? Чтобы первый был узенький, а остальные равные(это главное, а то каждый разной ширины) и широкие. Если использую

, то ерунда всякая получается.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

style type="text/css"> table < border-collapse: collapse; >table th, table td < padding: 0 5px; border: 1px solid #000; text-align: center; >/style> table> tr>col span ="1" width="25" valign="top">th> № /th> th colspan="2">Понедельник/th> th colspan="2">Вторник/th> th colspan="2">Среда/th> th colspan="2">Четверг/th> th colspan="2">Пятница/th> tr>

Ячейки разной ширины в одном столбце
Привет всем! Помогите вот с таким вопросом: можно ли в таблице иметь ячейки с разной шириной.

Как реализовать в Delphi ячейки разной ширины?
В MS Office видел возможность делать таблицу, где у одной ячейки ширина больше чем у другой. .

Есть ли таблица пропорций ширины символов стандартных шрифтов.
Хочу сделать процедуру Justify без map документа. Может кто-то знает алгоритм этой процедуры.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

table { table-layout: fixed; width: 50%; border-collapse: collapse; } th, td { border: 1px solid black; } .small { width: 30px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

table> tr> th class="small"> № /th> th>Понедельник/th> th>Вторник/th> th>Среда/th> th>Четверг/th> th>Пятница/th> /tr> tr> td>1/td> td>item2/td> td>item3/td> td>item4/td> td>item5/td> td>item6/td> /tr> /table>

mrtoxas, я использую calspan, а как сделать чтобы в нем столбики были разных размеров? А то они делятся пополам

Вы понимаете как работает colspan? Этот атрибут служит для объединения ячеек. Значение атрибута указывает сколько ячеек надо объединить. Хотите сделать разной длины, объединяйте разное кол-во ячеек.

Сообщение было отмечено Fedor92 как решение

Решение

1 2 3 4 5 6 7 8 9 10 11 12

table{ border-collapse: collapse; } td,th{ border:1px solid black; } col{ width:40px; } .wide{ width:200px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

table> tr> col span="1"> th> № /th> th colspan="2">Понедельник/th> th colspan="2">Вторник/th> th colspan="2">Среда/th> th colspan="2">Четверг/th> th colspan="2">Пятница/th> /tr> tr> td>1/td> td>item2/td> td>item3/td> td>item4/td> td class="wide">item5/td> td>item6/td> td>item7/td> td>item8/td> td>item9/td> td>item10/td> td>item11/td> /tr> /table>

Пожалуйста! Игра «Мост». Дан мост с арками разной ширины, в нижней строке экрана расположен мяч, которым можно
Игра "Мост". Дан мост с арками разной ширины, в нижней строке экрана расположен мяч, которым можно.

Оперативная память с разной частоты и разной пропускной способностью
Здравствуйте, уважаемые форумчане! Решил собрать новый ПК, у меня уже есть две планки оперативной.

Автоматическое изменение ширины столбца в DBGrid при изменении ширины формы
Подскажите как реализовать или дайте условие автоматического изменение ширины столбца в DBGrid при.

Автоматическое изменение ширины колонок в зависимости от ширины StringGrid
Здравствуйте, Уважаемые! Подскажите пожалуйста как написать процедуру, которая бы меняла ширину.

Источник

Css ячейки разной ширины

Если мы помним, из предыдущих тем, то ширина таблицы измеряется в

Эти свойства наследуют столбцы! Чтобы задать ширину столбца, надо знать, как устанавливать свойства css — их всего три.

Ширина столбца в процентах

Давайте поэкспериментируем! С шириной столбца в процентах!

Создадим таблицу с тремя столбцами!

И присвоим им ширину 25% + 50% + 25% сумма должна быть равна 100%.

Как видим, наша страница заполняет полное пространство на данной странице.

Результат столбца с разной шириной, в процента:

Теперь ширину столбца сделаем в пикселях.

Общая ширина текстового поля, где вы читаете данный текст не равна 600 пикселям.

Ширина столбца в пикселях

Делим на 3 части 150px + 300px + 150px

Смотрим наши получившиеся столбцы с разной шириной:

width=»150″

width=»300″

width=»150″

Ширина столбца через стили css

Теперь ширину столбца пропишем через стили css.

Сам столбец обозначается тегом «td»:

Есть несколько вариантов, как прописать ширину столбцов.

К примеру, если вы пропишите сам столбец и к нему прикрепите ширину.

Но у этого способа есть один самый главный минус — все столбцы на странице будут иметь эту ширину и если эти стили прописаны в главном файл css? то все столбцы, на всем сайте будут иметь именно эту ширину!

Поэтому, для каждого столбца нужно поставить отдельный класс или ид.

Например — таблица с шириной через css.

Обратите внимание, что на третьем столбце ширина не прописана — вопрос — какой ширины должен быть третий столбец!?

class=»first»

class=»second»

no class

Фиксированная ширина столбца

Как сделать ширину столбца фиксированной!?

Тут. у меня есть некое смущение! смайлы Почему!?

Давайте данный пункт разделим еще на два подпункта:

1). Теория и фиксированной ширине столбца, это свойство table-layout со значением fixed :

Специально сделал отдельный пример, где вы можете, попробовать разобраться, что к чему и есть ли какая-то разница с присутствием или отсутствием данного свойства! И подпункт 2

Код страницы с фиксированной шириной столбца:

width : 50%; /* устанавливаем ширину таблицы (без неё результат будет идентичный) */

border : 1px solid; /* устанавливаем сплошную границу 1px (по умолчанию — черная) */

table-layout : auto; /* алгоритм автоматического размещения макета таблицы браузером */

table-layout : fixed; /* алгоритм фиксированного размещения макета таблицы браузером */

table < width : 50%; >table-layout: auto;

table < width : 50%; >table-layout: fixed;

table.test3

table.test4

table.test5

Наименование Цена 45 рублей

Веревка 20 рублей Мыло жидкое

Мыло жидкое 45 рублей Мыло жидкое

table.test6

Наименование Цена 45 рублей

Веревка 20 рублей Мыло жидкое

Мыло жидкое 45 рублей Мыло жидкое

У меня . в самом начале моего пути, было несколько сайтов построенных чисто на таблицах! И приверженцем таблиц я был очень долго — столько иногда не живут.

НО! НИКОГДА, даже не слышал и не нуждался в таком свойстве, как фиксированная ширина столбца — table-layout : fixed; !

Здесь, конечно, идет речь не о самом столбце, а о таблице вообще! Но тем не менее!

Но как же я делал фиксированную ширину столбца!?

Из стилей мы видим, что первые три столбца от левого края имеют фиксированную ширину! А четвертый столбец занимает все, что осталось от 100%

Фиксированная ширина столбца через :nth-child(n)

Как можно сделать фиксированную ширину без классов, которые указаны в предыдущем пункте! Эта таблица, что приведена в качестве примера, была сделана уже довольно давно и поскольку она выполняет свою работу и классы в том чисел поддерживают фиксированную ширину. то и менять ничего не нужно!
НО СЕГОДНЯ!

Естественно я так делать не буду!

Для этого есть более цивилизованные методы установки фиксированной ширины, сегодня, только что я сделал новую таблицу(без таблиц никуда! смайлы )

Мы будем обращаться к ширине столбца по порядковому номеру столбца!

Чтобы не рассусоливать! Нам нужен первый столбец, чтобы его фиксированная ширина была 30%!

Специально не убрал два класса .table.td_child в них есть своя фишка(о которой чуть ниже)!
Если мы хотим обратиться к первому столбцу td , то пишем так : td:nth-child(1)

А фишка в чем!? Что все таблицы с классом table будут иметь свободные ширины столбцов, если это не оговорено отдельно! Вот этот класс td_child и есть отдельно. Т.е. в данном случае, первый столбец всегда будет 30%

Источник

Как создать таблицу в HTML c разной шириной столбцов и высотой строк?

Я только начинающий в этом деле, изучаю таблицы. И вот столкнулся с проблемой. Мне нужна таблица приблизительно такого макета ↓

когда сначала задаю ширину первого ряда «» *тут все нормально
а ниже если я меняю параметр ширины то получаю ячейку такой же ширины (точки специально 🙂 а то без них не показывает в предосмотре)
может я не правильно использую данные параметры, не могу решить данную проблему. Каким тогда образом мне сделать таблицу подобного типа? ↑
Также использовал свойство colspan, с ним тоже не выходит

Главное правильно разбить на ячейки и объединить, тогда можно и размеры ячеек не задавать — они от общей ширины таблица сами распределятся. Подойдёт метод разбивки всей таблицы на сетку (в вашем случае 6 колоночную или 12), аналогично любому CSS фреймворку, но только вместо классов отвечающих за ширину использовать атрибут colspan, а за высоту rowspan. Пример

Вот интерактивный курс. И остальные темы не поленитесь посмотреть. На мой взгляд очень хорош для начинающих.

Интересно узнать, для чего такая таблица нужна.
Скорее всего, удобнее будет разбить на отдельные блоки, чем создавать и поддерживать такую таблицу.

Меня в данном вопросе интересует реализация такой таблицы, практиковал и столкнулся с такой проблемой, вот и спрашиваю

Источник

Таблицы. Различный размер ячеек

Прошу помощи. Столкнулся с проблемой, не могу поменять ширину ячейки в таблице, устанавливается ровно половина предыдущей.

Необходимо реализовать в виде:

1 2 3 4 5 6 7 8 9 10 11 12

.col1 { width: 4%; } .col2 { width: 96%; } .col7 { width: 60%; } .col8 { width: 36%; }

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

table align="center" cellpadding="2" cellspacing="0" colspan="3"> tr> td class="col1" align="center" rowspan="2" colspan="1"> № п/п /td> td class="col2" align="center" colspan="2"> Образовательные программы профессиональной подготовки /td> /tr> tr> td class="col7" align="center" colspan="1"> Код /td> td class="col8" align="center" colspan="1"> Наименование профессии /td> /tr> tr> td class="col1" align="center"> 1 /td> td class="col7" align="center"> 2 /td> td class="col8" align="center"> 3 /td> /tr> /table>

Размер ячеек таблицы
Хочу увеличить расстояние между 1/2 и 2/3 ячейками. Писал и cellspacing и border radius. Толку 0.

Размер ячеек таблицы — как изменить ?
Доброго времени! Такая проблемка: есть таблица со свойством table-layout: fixed; это свойство.

Почему две совершенно одинаковые таблицы имеют разный размер ячеек?
У меня есть две СОВЕРШЕННО идентичные таблицы по характеристикам (оглавлению), но разные по.

Как уменьшить отступ от border таблицы до ячеек, если у ячеек есть расстояние между ними?
В общем, есть таблица у которой есть border, так же есть расстояние между ячеек border-spacing, дак.

.col1 {width: 4%;} .col2 {width: 96%;} .col7 {width: 6%;} .col8 {width: 36%;}

Источник