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

CMS
  • Recluse
  • 21.05.2017
  • 20 597
  • 2
  • 18.08.2020
  • 21
  • 20
  • 1
  • Содержание статьи
    • Фиксированный размер ячеек через CSS
    • Комментарии к статье ( 2 шт )
    • Добавить комментарий

Если в процессе создания таблицы, вам необходимо зафиксировать размер ячеек в определенном столбце, то с помощью третьей версии CSS это достаточно легко сделать. В интернете довольно часто предлагают методы с использованием colspan, или указанием размера ячейки прямо в её теге (пример: <td>).

С помощью CSS все это можно сделать гораздо легче.

И так, допустим у нас есть таблица со списком исполнителей электронной музыки:

<table>
<tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>
<tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>
<tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>
</table>

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

table {
	table-layout:fixed; width:450px;
}
table td {
	overflow:hidden;
}
table td:nth-of-type(1) {
	width:200px;
}
table td:nth-of-type(2) {
	width:75px;
}
table td:nth-of-type(3) {
	width:175px;
}

Как можно догадаться, table td:nth-of-type(1), table td:nth-of-type(2) и table td:nth-of-type(3) содержат цифры колонок, а параметр width отвечает за их ширину.

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

<table>
<tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>
<tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>
<tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>
</table>

То и CSS код должен быть следующим:

table.music {
	table-layout:fixed; width:450px;
}
table.music td {
	overflow:hidden;
}
table.music td:nth-of-type(1) {
	width:200px;
}
table.music td:nth-of-type(2) {
	width:75px;
}
table.
 
 music td:nth-of-type(3) {
	width:175px;
}

И еще одна важная деталь — если в вашей таблице используется заголовок вида <thead>, то для его ячеек <th> придется так же прописывать ширину, как и для ячеек <td>, в противном случае этот способ не будет работать. Т. е. теперь CSS будет выглядеть вот так:

table.music {
	table-layout:fixed; width:450px;
}
table.music td,
table.music th {
	overflow:hidden;
}
table.music td:nth-of-type(1),
table.music th:nth-of-type(1) {
	width:200px;
}
table.music td:nth-of-type(2),
table.music th:nth-of-type(2) {
	width:75px;
}
table.music td:nth-of-type(3),
table.music th:nth-of-type(3) {
	width:175px;
}

html — Равные ячейки таблицы

Вопрос задан

Изменён 11 месяцев назад

Просмотрен 142 раза

Как сделать равные ячейки таблицы?

Таблица сделана с помощью Bootstrap’а. Но меня не устраивает, что поле с датой занимает так много места, как сделать эту ячейку меньше или как сделать все ячейки одинакового размера?

  • html
  • css
  • веб-программирование
  • bootstrap
  • веб-дизайн
1

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

<!DOCTYPE html>
<body>
  <table border=1>
    <th>#</th>
    <th>Дата</th>
    <th>Монета</th>
    <th>Кол-во</th>
    <th>Цена</th>
    <tr><td>1</td><td>какая то дата</td><td>BTC</td><td>2. 0</td><td>2.0</td></tr>
    <tr><td>2</td><td>еще какая то дата</td><td>ETH</td><td>0.0003</td>27.34</tr>
  </table>
  <style media="screen">
    .table1 {
      width: 100%;
    }
    .table1 th, td {
      width: 20%;
      text-align: left;
    }
  </style>
</body>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

javascript — Как изменить размер столбцов таблицы html?

У меня довольно стандартный бутстраповый

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

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

css — изменение размера таблицы HTML, чтобы все столбцы оставались в поле зрения

спросил

Изменено 6 лет, 4 месяца назад

Просмотрено 5к раз

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

Пример задачи:

Предположения и цели:

  • Мы не будем знать, сколько столбцов будет
  • Столбцы всегда будут оставаться на одной строке (CSS пробел: nowrap)
  • В идеале решение не включает JavaScript, только CSS
  • Было бы здорово, если бы текст внутри таблицы отображался в виде эллипса (. ..), а затем, когда вы наводили на него указатель мыши, он расширялся, и вы могли бы прокручивать его по горизонтали

Код по ссылке Codepen:

HTML
элемента. Я не могу использовать какие-либо плагины jQuery, так как я использую Angular, а зависимость от jQuery неприемлема.

Я думал, что если бы я мог поймать событие click/mousemove на правой границе элемента

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

Каков наилучший способ изменить размер столбцов пользователем? Без jQuery (и желательно — в контексте Angular 2).

  • javascript
  • css
  • html
  • угловой
1

Свойство resize не работает с таблицей. Вот почему вам нужно поместить div внутри таблицы th и td , а затем изменить его размер.

Попробуйте приведенный ниже фрагмент

 таблица {
  граница коллапса: коллапс;
  интервал между границами: 0px;
}
тд {
  граница: 2px сплошной черный;
  заполнение: 0;
  поле: 0px;
  переполнение: авто;
}

дел {
  изменить размер: оба;
  переполнение: авто;
  ширина: 120 пикселей;
  высота: 120 пикселей;
  поле: 0px;
  отступ: 0px;
  граница: 1px сплошной черный;
  дисплей:блок;

}

тд див {
  граница: 0;
  ширина: авто;
  высота: авто;
  минимальная высота: 20 пикселей;
  минимальная ширина: 20 пикселей;
} 
 <таблица>
один
два
три
четыре
пять
шесть
семь
восемь
девять

CSS 

 таблица {
    граница коллапса: коллапс;
    ширина: 100%;
}
й, тд {
    граница: 1px сплошная #ccc;
    пробел: nowrap;
}
  • HTML
  • CSS
  • HTML-таблица
1

Следующие изменения CSS будут:

  • Сохранять текст в каждой ячейке на одной строке
  • Показывать многоточие, когда содержимое ячейки шире самой ячейки
  • При наведении многоточие исчезает, а содержимое становится прокручиваемым

Важными свойствами CSS являются:

 таблица {
  ширина: 100%;
  макет таблицы: фиксированный;
}
й, тд {
  пробел: nowrap;
  переполнение-x: прокрутка;
  переполнение текста: многоточие;
}
й: наведите,
тд: наведите {
  переполнение текста: клип;
}

Вот пример, хотя макет SO не демонстрирует функцию прокрутки из-за ширины. Для рабочего примера посмотрите эту демо-версию Codepen и измените размер экрана, пока ячейки таблицы не станут слишком узкими для отображения содержимого.

 таблица {
  граница коллапса: коллапс;
  ширина: 100%;
  максимальная ширина: 100%;
  макет таблицы: фиксированный;
}
й,
тд {
  граница: 1px сплошная #ccc;
  пробел: nowrap;
  переполнение-x: прокрутка;
  переполнение текста: многоточие;
}
й: наведите,
тд: наведите {
  переполнение текста: клип;
} 
 <таблица>
1

ОБНОВЛЕНИЕ

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

Для убирающегося многоточия я использовал 2 :target с.

Прокручиваемый, я пропустил это первое чтение, хорошо, это более реалистично. Разработанный для четырех столбцов, было бы нелепо ожидать множество столбцов с учетом ограничений. Если у меня будет больше времени, я добавлю многоточие, но пока достаточно будет просто маленького уменьшающегося шрифта. Прокрутка горизонтальных ячеек осуществляется с помощью overflow:scroll/auto на

Первый Первый Первый Секунда Секунда Секунда Третий Третий Третий Четвертый Четвертый Четвертый
Первый Первый Первый Секунда Секунда Секунда Третий Третий Третий Четвертый Четвертый Четвертый
Первый Первый Первый Секунда Секунда Секунда Третий Третий Третий Четвертый Четвертый Четвертый
Первый Первый Первый Секунда Секунда Секунда Третий Третий Третий Четвертый Четвертый Четвертый
Первый Первый Первый Первый Первый Секунда Секунда Секунда Секунда Секунда Третий Третий Третий Третий Третий Четвертый Четвертый Четвертый Четвертый Четвертый
Первый Первый Первый Первый Секунда Секунда Секунда Секунда Третий Третий Третий Третий Третий Четвертый Четвертый Четвертый
Первый Первый Первый Первый Секунда Секунда Секунда Секунда Третий Третий Третий Третий Третий Четвертый Четвертый Четвертый
Первый Первый Первый Первый Секунда Секунда Секунда Секунда Третий Третий Третий Третий Третий Четвертый Четвертый Четвертый
и добавьте
внутри каждой таблицы

Соответствующая таблица CSS 

 {
  ширина: 98vw;
  высота: авто;
  минимальная высота: 200 пикселей;
  макет таблицы: фиксированный;
}
й,
тд {
  размер шрифта: .4em;
  максимальная ширина: 19%;
  переполнение-у: скрыто;
  переполнение-х: прокрутка;
}

SNIPPET 

 таблица {
 граница коллапса: коллапс;
 ширина: 96vw;
 высота: авто;
 минимальная высота: 200 пикселей;
 макет таблицы: фиксированный;
 граница: 1px сплошная #ccc;
}
й,
тд {
 граница: 1px сплошная #ccc;
 пробел: nowrap;
 размер шрифта: .
No related posts.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *