Фиксируем размер ячеек html таблицы с помощью css3

Адаптивные таблицы

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

Вертикальная обрезка/усечение

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

Всегда адаптивный

Через каждую контрольную точку используйте для горизонтальной прокрутки таблиц.

Специфическая контрольная точка

Используйте по мере необходимости для создания адаптивных таблиц до определенной контрольной точки. С этой контрольной точки и выше таблица будет вести себя нормально и не будет прокручиваться по горизонтали.

Эти таблицы могут отображаться неработающими до тех пор, пока их адаптивные стили не будут применены к определенной ширине области просмотра.

Очистка Float

Как ни странно, одним из наиболее популярных способов использования является очистка свойства .

Проблема встречается в следующем: когда вы помещаете в элемент дочерний элемент с установленным свойством (плавающий), то родительский элемент не растягивается, чтобы охватить дочерний элемент, а сворачивается, не учитывая его. Это бывает проблемой, например, когда у родительского элемента задан фон или рамка.

На примере это наглядно видно. Внутри родительского элемента (в синей рамке) помещен элемент с текстом и установленным свойством . Родительский элемент при этом свернулся.

See the Pen
overflow float by Андрей (@adlibi)
on CodePen.

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

See the Pen
overflow float 2 by Андрей (@adlibi)
on CodePen.

Отображение пустых ячеек

Для пустых ячеек можно запретить отображение фона и рамки. Если
ячейка содержит пробел, перевод строки
или табуляцию, то она всё равно считается пустой. Отмену отображения пустых ячеек устанавливает
свойство empty-cells. Может принимать значения:

empty-cells: show — ячейки видны (по умолчанию)

empty-cells: hide — ячейки не видны

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

Стиль:

#hid td
  {
  background-color: #909090;
  }

HTML код:

<table id="hid">
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td></td>
    <td>строка 2 ячейка 2</td>
</tr></table>

Пустая ячейка видна, у неё отображаются рамка и фон.

Теперь добавим таблице свойство empty-cells.

#hid 
  {
  empty-cells: hide;
  }

Обратите внимание, пустая ячейка не отображается в таблице

Опции таблицы

Заголовок таблицы

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

Подпись

действует как заголовок таблицы. Это помогает пользователям программ чтения с экрана найти таблицу, понять, о чем она, и решить, хотят ли они ее прочитать.

Вы также можете поместить в начало таблицы с помощью .

Расстояние между ячейками

CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется
свойтсво border-spacing. Значением свойства является расстояние в
единицах измерения CSS.
Это свойство не работает, если установлено свойство border-collapse со значением
collapse.

Создадим ещё одну таблицу и установим расстояние между ячейками:

Стиль:

#dis 
  {
  border-spacing: 10px;
  }

HTML код:

<table id="dis">
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
</tr></table>

Свойству border-spacing можно
указать два значения через пробел. При этом,
первое значение — это расстояние по горизонтали, а второе — по вертикали.

Укажем созданной таблице разные расстояния. 17 строка будет выглядеть так:

border-spacing: 5px 15px;

Use Cases and Examples

Simple Slider

We can create a quick and simple slider by clipping the content horizontally and allowing it to scroll.

In the mockup above, we have cards that laid out horizontally, and there is a scrollbar that allows us to scroll and reveal more content. To implement that, we will need to do the following:

• Display the cards in the same line. I will use for that.
• Add to the container.

And it works on desktop browsers. However, while testing this on Safari for iOS (12.4.1), the scrolling didn’t work. After some trial and error, the scrolling worked when I added width to the child items. It works without issues for iOS (13.3).

Modal Content

When the modal content is too long, we can easily make the area scrollable. To accomplish that, we should have the following:

• Maximum height for the modal.
• The modal body should take the full available space.

A Card With Rounded Edges

When we have a card and we want its corners to be rounded, we tend to do add for the top and bottom corners as below:

This could be a lot of work, especially if the card has a different design on mobile. For example, instead of stacking its child items, they will be next to each other.

For that case, it’s good to use on the wrapper, and then add to it. See below:

However, this solution has some caveats that might make it perfect for all cases. Please test properly.

Text Truncation

To account for long content, we can truncate the text by using property.

On the element we want it to truncate, I added the following:

And that’s it! Notice that is important for that to work.

Animations

When it comes to animation, the benefit of lies in clipping hidden elements that can be shown on hover. Consider the figure below:

In CSS, it will look like this:

We have two buttons and each one has a pseudo-element that is translated to the left and bottom, accordingly. See the video below:

Табличные данные

Это курс по CSS, так что не буду тратить много времени. Главная причина использовать таблицы в приложении — это отображение табличных данных. Под табличными данными подразумевается то, что вы могли бы отобразить в виде матрицы.

Когда дело доходит до стилизации таблиц, есть некоторые хорошие общие правила:

• Широкие таблицы должны быть в виде зебры или используйте :hover с фоновым цветом (или чем-то аналогичным), чтобы помочь глазам связать ячейки из одной строки.
• Столбцы с числовыми данными должны быть выровнены по правому краю, так чтобы цифры были друг под другом.
• Крайние справа столбцы, возможно, потребуют выравнивания, чтобы избежать рваного правого края (думаю, text-align: justify).
• При возможности, высота строк должна быть одинакова, чтобы было проще сканировать по вертикали (этот общий принцип известен в бизнесе как «вертикальный ритм» и он очень важен).

Акцентированные таблицы

Разделенные «полосами» ряды

Добавьте класс к для разделения «полосками зебры» рядов таблицы.

Эти классы также можно добавить в следующие варианты таблиц:

Ряды с :hover (отзывчивость при наведении)

Добавьте класс в для активации :hover у рядов таблицы.

Эти :hover ряды также можно комбинировать с «полосатым» вариантом:

Активные таблицы

Для выделиния ячеек таблицы добавьте класс .

Как работают варианты и акцентированные таблицы?

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

• Мы начинаем с установки фона ячейки таблицы с помощью настраиваемого свойства . Затем все варианты таблицы устанавливают это настраиваемое свойство для раскрашивания ячеек таблицы. Таким образом, у нас не будет проблем, если полупрозрачные цвета используются в качестве фона стола.
• Затем мы добавляем тень вставки на ячейки таблицы с помощью на слой поверх любого указанного . Поскольку мы используем большой разброс и отсутствие размытия, цвет будет монотонным. Так как по умолчанию не установлен, у нас нет тени блока по умолчанию.
• Когда добавляются классы , или для устанавливается полупрозрачный цвет для раскрашивания фона.
• Для каждого варианта таблицы мы генерируем цвет с самым высоким контрастом в зависимости от этого цвета. Например, основной цвет для темнее, а для светлее.
• Цвета текста и границ генерируются одинаково, а их цвета наследуются по умолчанию.

«За кадром» это выглядит так:

Вертикальное выравнивание

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

Horizontal Scrolling Issues

Often times, we face the issue of horizontal scrolling and it gets harder when the reason is unknown. In this section, I will list some common causes for horizontal scrolling so you can account for them while building layouts.

Elements That Are Absolutely/Fixed Positioned

When there is an element that has a position value of or , there is a possibility for it to cause horizontal scrolling. This can happen when one of the , values is positioning the element outside the body element.

To solve that, you need to check why this element is positioned outside the viewport in the first place. If it’s not necessary, then it has to be removed or the position value should be edited.

Grid Items

CSS grid has three cases that can lead to horizontal scrolling. Let’s see them.

Using Pixel Values For Columns

When using pixel values, this will cause issues when the viewport width is small. See below:

The solution is to reset the columns and only use the one above on viewports that have enough space.

Using minmax()

It might be tempting to forget about testing this for mobile, as it will cause horizontal scrolling at some point since the minimum width is .

A simple fix for that is to reset the to and on changing it when the viewport is larger.

Using Percentages Instead of The Fraction Unit

As per this tweet by Jake Archibald, if we used a percentage for the grid columns, and then added a , this will cause horizontal scrolling. The reason is that the value is added to the width of the container.

To fix that, avoid using percentages for the grid columns, and use instead. When used, the will deduct from the available space.

Flex Wrap

For flex items, it’s important to add to the container or things might get messy for smaller viewports.

The above is not enough. Make sure to add to avoid any unexpected overflows.

Long Words or Links

When dealing with long words or links that are placed within content, it should break to a new line or otherwise, you guessed it! There will be a horizontal scrolling.

To fix that, we need to break long words and links. Here is how we can do it:

Or we can use :

Images Without Set on Them

If you’re someone who doesn’t use a CSS reset, you might accidentally forget to use for all s as this will make them responsive on mobile. If not, this will cause issues. Please test well.

Using Fixed Width

A fixed width can cause problems if used and generally, I try to avoid it as much as I can. If it’s really necessary, then it’s better to use it with , so if space is not enough for the value, then the will do the work.

Adding will avoid any horizontal scrolling.

How to detect overflow

Horizontal scrolling isn’t always a bad thing. However, when testing for unwanted horizontal scrolling, be on the lookout for anything that makes your layout look or feel like the boundary (usually the right side of your design) isn’t functioning as you would like. In other words, look for extra space or elements hanging off the edge of your design’s boundary as you scroll. You can check for this in the Designer and the published site. 

To detect in the Designer whether your project might exhibit unwanted horizontal scrolling:

1. Open the Designer
2. Scroll left and right to see if any elements overflow outside the viewport 
3. Grab the edge of the Designer canvas
4. Resize the canvas to check for responsiveness and fluidity

You can grab the edge of the canvas to resize it and check for responsiveness and fluidity.

Read more about how to make your designs responsive.

‍

To detect unwanted overflow in your published site (especially if you have interactions in place):

1. Publish your site
2. Check if your interactions cause unwanted whitespace to the right of your design (especially on mobile devices)

Interactions often cause unwanted whitespace, especially on mobile. 

Extra whitespace commonly occurs with interactions because even after the interaction has completed, the browser still thinks the interaction needs the extra width that was used at the start of the animation. 

Решение (вариант 1)

Для решения такой задачи идеально подходит таблица со своей способностью «приспосабливаться к внешним условиям». Каких-либо других элементов, которые обладали бы данной особенностью я не знаю. Единственное, что пришло на ум — это эмуляция поведения таблицы для списка. В этом нам поможет CSS свойство display и его значения table-row и table-cell. И так, в HTML у нас обычный список:

<nav>
<ol id="nav"> <!-- id тут нужен только для IE6-7 и только для резиновых дизайнов -->
<li><a href="#">Главная</a></li>
<li><a href="#">Собираем</a></li>
<li><a href="#">Без цензуры чхать на цензуру</a></li>
<li><a href="#">Учимся</a></li>
<li><a href="#">Справочники</a></li>
</ol>
</nav>

ol {
	display: table-row; /* эмуляция строки таблицы */
}
li {
	width: auto; /* чтобы поведение было аналогичным ячейки таблицы */
	display: table-cell; /* эмуляция ячейки таблицы */
	text-align: center;	
	height: 50px; /* высота пункта */
	padding-left: 2px; /* визуальная граница между пунктами меню */
	vertical-align: bottom; /* это нужно для случаев, когда в пункте меню текста больше чем на одну строку */
}
li:first-child {
	padding: 0; /* у первого элемента убираем отступ чтобы четко прилег к левой границе */
}
a {
	width: 1000px; /* вот это заставляет наши псевдоячейки растянуться должным образом */
	height: 50px;
	display: table-cell; /* без этого тоже никак */
	vertical-align: middle; /* вертикальное выравнивание текста */
}

Этого достаточно для большинства популярных ныне браузеров. Но так как IE6 и 7 все еще присутствуют на рынке, без «шаманства» не обойтись. Во-первых, не забываем подключать html5shiv или modernizr, если используется HTML5 разметка. Во-вторых, пишем еще приличный кусок CSS кода для этих браузеров (только не забудь вынести его в отдельный CSS и подключить только для IE нужных версий):

nav { /* эти правила нужны чтобы устранить ряд небольших багов ие */
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
}

li {
	display: inline; /* table-cell мы же не понимаем */
	zoom:1;
	overflow: hidden;
}

ol {
	display: block;
	position: relative;
	height: 50px;	
	overflow: hidden;
	/* ниже идет мега шамантсво, где рассчитывается ширина пункта меню в зависимости от текущей ширины меню и к-ва пунктов в нем */
	z-index: expression(runtimeStyle.zIndex = 1, function(node) {	
		var	list = node.childNodes, i = list.length, iWidth = node.offsetWidth/i;
	
			while(i--) {
				list.style.width = iWidth+&px&;
			}
			node.style.width=node.offsetWidth+10+"px"; /* 10 - это значение подбираем по обстоятельствам. нужно чтобы меню выстроилось в одну строку (устраняем погрешности округлений вычислений) */
		}(this));)
}
a {
	width: auto;
	height: auto;
	display: block;
	z-index: expression(runtimeStyle.zIndex = 1, this == ((50/2)-parseInt(offsetHeight)/2) <0 ? (style.paddingTop="0",style.height="50px") : (style.paddingTop=(50/2)-(parseInt(offsetHeight)/2) +&px&, style.height="50px")); /* вертикальное выравнивание */
}

И это еще не все. IE6 нужно еще научить понимать first-child. А если дизайн у нас резиновый, тогда нам нужно пересчитывать ширину пунктов меню при изменении размеров экрана:

window.onresize = function()
{

	var nav = document.getElementById("nav");
	nav.style.width = "100%";
	var	list = nav.childNodes, i = list.length, iWidth = nav.offsetWidth/i;
	
			while(i--) {
				list.style.width = iWidth+&px&;
			}
			nav.style.width=nav.offsetWidth+10+"px";
}

Демо пример. Проверено в:

• IE 6-9
• Firefox 4
• Opera 11
• Safari 5
• Chrome
• iPhone 3GS

Если код копируешь из примеров, не забудь удалить комментарии из CSS — старые IE не всегда адекватно на их реагируют.

Анатомия

Верхний колонтитул таблицы

Подобно таблицам и темным таблицам, используйте классы-модификаторы или чтобы казались светлыми или темно-серыми.

Заголовки

действует как заголовок таблицы. Это помогает пользователям программ чтения с экрана найти таблицу, понять, о чем она, и решить, хотят ли они ее прочитать.

Вы также можете поместить в верхнюю часть таблицы с помощью .

Как работают варианты и акцентированные таблицы?

Для таблиц с акцентом (, и ) мы использовали некоторые методы, чтобы эти эффекты работали для всех наших :

• Мы начинаем с установки фона ячейки таблицы с помощью настраиваемого свойства. Затем все варианты таблицы устанавливают это настраиваемое свойство для раскрашивания ячеек таблицы. Таким образом, у нас не будет проблем, если полупрозрачные цвета используются в качестве фона стола.
• Затем мы добавляем градиент в ячейки таблицы, чтобы слой поверх любого указанного . Поскольку по умолчанию прозрачно, по умолчанию у нас есть невидимый прозрачный линейный градиент.
• Когда добавляются классы либо , либо , устанавливается полупрозрачный цвет для раскрашивания фона.
• Для каждого варианта таблицы мы генерируем цвет с наивысшим контрастом в зависимости от этого цвета. Например, цвет акцента для более темный, но имеет более светлый цвет акцента.
• Цвета текста и границ генерируются одинаково, а их цвета наследуются по умолчанию.

За кадром это выглядит так:

Добавление полос прокрутки для блоков небольшого размера свойством overflow CSS

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

Товаров так много, что они не помещаются на видимую часть страницы, и у посетителя нет возможность нажать на кнопку «Оформить заказ». Это очень не красиво и не удобно.

Выходом из данной ситуации является ограничение максимальной высоты для блока с товарами, и добавление вертикальной полосы прокрутки для него. Для этого мы задаем следующие стили для этого блока:

PHP

#pop-up-products-list {
overflow-y: auto; /*Автоматическое добавление полосы прокрутки* /
max-height: 300px; /*Максимальная высота блока*/
}

Свойство overflow-y CSS — это то же самое свойство overflow, но предназначенное для управления контентом только по вертикали. Есть так же специальное свойство для управления контентом по горизонтали — overflow-x. Они имеют такой же набор значений, как и базовое свойство.

В данном случае мы добавили для overflow-y значение auto, которое добавляет полосы прокрутки по вертикали только при необходимости.

Вот что у нас получится:

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

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

overflow

Желаю вам успехов! До встречи в следующих статьях!

С уважением Юлия Гусарь

Как работают варианты и акцентированные таблицы?

Для таблиц с акцентом (, и )мы использовали некоторые методы, чтобы эти эффекты работали для все наши :

• Мы начинаем с установки фона ячейки таблицы с помощью настраиваемого свойства . Затем все варианты таблицы устанавливают это настраиваемое свойство для раскрашивания ячеек таблицы. Таким образом, у нас не будет проблем, если полупрозрачные цвета используются в качестве фона стола.
• Затем мы добавляем тень вставки на ячейки таблицы с помощью на слой поверх любого указанного . Поскольку мы используем большой разброс и отсутствие размытия, цвет будет монотонным. Так как по умолчанию не установлен, у нас нет тени блока по умолчанию.
• Когда добавляются классы , или для устанавливается полупрозрачный цвет для раскрашивания фона.
• Для каждого варианта таблицы мы генерируем цвет с самым высоким контрастом в зависимости от этого цвета. Например, основной цвет для темнее, а для светлее.
• Цвета текста и границ генерируются одинаково, а их цвета наследуются по умолчанию.

За кадром это выглядит так:

«Отзывчивые» таблицы

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

Вертикальное обрезание/сокращение

«Отзывчивые» таблицы используют , что «обрезает» любой контент, который существует ниже конца верхних краев таблицы. В частности, это может «срезать» выпадающие меню и другие сторонние виджеты.

Всегда «отзывчиво»

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

Специфика брейкпойнтов (контрольных точек)

Используйте когда необходимо создать адаптивные таблицы до определенной брейкпойнта. До этого значения таблицы будут вести себя как обычные таблицы и не будут прокручиваться горизонтально.

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

sm:

md:

lg:

xl:

xxl:

Акцентированные таблицы

Разделенные «полосами» ряды

Добавьте класс к для разделения «полосками зебры» рядов таблицы.

Эти классы также можно добавить в следующие варианты таблиц:

Ряды с :hover (отзывчивость при наведении)

Добавьте класс в для активации :hover у рядов таблицы.

Эти :hover ряды также можно комбинировать с «полосатым» вариантом:

Активные таблицы

Для выделиния ячеек таблицы добавьте класс .

Значения

visible

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

hidden

Выходящий за границы контейнера контент будет скрыт.

scroll

Аналогично hidden, за исключением того, что добавляется полоса прокрутки, чтобы пользователи могли прокручивать скрытый контент.

auto

Если контент выходит за пределы своего контейнера, этот контент будет скрыт и появится полоса прокрутки. То есть в отличие от предыдущего значения полоса прокрутки появится только при необходимости.

initial

использует значение по умолчанию – .

inherit

перенимает значение переполнения от родительского элемента.

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

Табличные данные

Я не буду подробно останавливаться на этой теме, поскольку в первую очередь это курс по CSS. Но основной причиной использования таблиц в верстке являются табличные данные. Табличными (tabular) данные считаются, если вы можете представить их в таблице (spreadsheet). (Прим. переводчика: без уточнения английских слов, имеющих одинаковое значение в русском языке, в предложении возникает тавтология.) Контентная матрица.

Есть несколько основных правил, которым стоит следовать когда дело доходит до создания таблиц с табличными данными:

• Большие таблицы должны быть раскрашены в полоску или при наведении на строку (:hover) у нее должен появляться цветной фон. Это нужно чтобы видеть все ячейки в одной строке.
• Столбцы с числовыми данными должны иметь выравнивание по правому краю так, чтобы цифры находились друг под другом.
• Текст в крайнем правом столбце должен иметь правую выключку, чтобы избежать рваного края (вполне подойдет text-align: justify).
• Если это возможно, высота строк должна быть одинаковой, чтобы облегчить вертикальный просмотр. (Этот общий принцип известен как “вертикальный ритм” и он очень важен.)

Посмотрите на зелье табличных стилей как на пример, в котором соблюдены эти правила.

Заключение

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

p.s. Хочется сказать отдельное спасибо Александру Егереву (aka alexriz) за решение, которое помогло исправить неприятный баг в браузере Opera, связанный с непонятным нижним отступом (см. комментарии). Добавил решение в статью. 

Последнее обновление: 05.10.2012 — Снова Александр Егерев (aka alexriz) нашёл-таки решение для бага в Opera под Mac и Linux. Добавил решение в статью. (Ссылка на демо-пример)