Граница на всю ширину сетки

У меня есть сетка:

body {
    display: block;
    margin: 8px;
}

.GridTable {
  position: relative;
  display: flex;
  width: auto;
  flex-direction: column;
}

.TableRows {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.TableRow {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-bottom:2px solid black
}

.TableHeader {
    position: relative;
    /* width: 100%; */
    display: flex;
    flex-direction: row;
}

.headerItem {
  flex: none;
  width: 200px;
  min-height: 100px;
  height: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all
}
<div class = "GridTable">
  <div class = "TableHeader">
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>


  </div>
  <div class = "TableRows">
    <div class = "TableRow">
          <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
    <div class = "headerItem">time2</div>
      // many others column values
    </div>
    <div class = "TableRow">
          <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
    <div class = "headerItem">time</div>
      // many others column values
    </div>
  </div>
</div>

Сетка содержит много столбцов, так как ее значения => не подходят для 100% размера экрана, поэтому ее можно прокручивать влево/вправо (и, следовательно, width:auto )

Однако, когда я добавляю border-bottom: 2px solid white к классу TableRow, граница имеет только ширину 100% от размера экрана, а другая часть строки не имеет границы.

Как добавить границу, которая находится под всем TableRow, а не только на первых 100% размера экрана?

Спасибо за помощь!

@G-Cyrillus готово

— Johnyb 17.03.2022 15:15
html css
17.03.2022 14:50
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, прокрутка — это HTML, а не ваша сетка ;).

Ваше содержимое переполняет блочные контейнеры, которые занимают 100% доступной ширины.

Я вижу несколько вариантов, позволяющих им расти шире родителя.

  • Превратите родителя в контейнер inline-flex.

body {
  display: block;
  margin: 8px;
}

.GridTable {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  }

.TableRows {
  position: relative;
  
  display: flex;
  flex-direction: column;
}

.TableRow {
  position: relative;
  display: flex;
  flex-direction: row;
  border-bottom: 2px solid black
}

.TableHeader {
  position: relative;
  display: flex;
  flex-direction: row;
}

.headerItem {
  flex: none;
  width: 200px;
  min-height: 100px;
  height: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all
}
<div class = "GridTable">
  <div class = "TableHeader">
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
  </div>
  <div class = "TableRows">
    <div class = "TableRow">
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      // many others column values
    </div>
    <div class = "TableRow">
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      // many others column values
    </div>
  </div>
</div>
  • Используйте min-width:min-content

body {
  display: block;
  margin: 8px;
}

.GridTable {
  position: relative;
  display: flex;
  flex-direction: column;
  /* here min-width:min-content; or next child container */
  }

.TableRows {
  position: relative;
  display: flex;
  min-width:min-content;/* here */
  flex-direction: column;
}

.TableRow {/* not here since it has more than a single child */
  position: relative;
  display: flex;
  flex-direction: row;
  border-bottom: 2px solid black
}

.TableHeader {
  position: relative;
  display: flex;
  flex-direction: row;
}

.headerItem {
  flex: none;
  width: 200px;
  min-height: 100px;
  height: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all
}
<div class = "GridTable">
  <div class = "TableHeader">
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
  </div>
  <div class = "TableRows">
    <div class = "TableRow">
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      // many others column values
    </div>
    <div class = "TableRow">
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      // many others column values
    </div>
  </div>
</div>
  • или даже сделать основной контейнер табличным контейнером, чтобы он рос из содержимого, которое он содержит.

body {
  display: block;
  margin: 8px;
}

.GridTable {
  position: relative;
  display:table;
  }

.TableRows {
  position: relative;      
  display: flex;
  flex-direction: column;
}

.TableRow {
  position: relative;
  display: flex;
  flex-direction: row;
  border-bottom: 2px solid black
}

.TableHeader {
  position: relative;
  display: flex;
  flex-direction: row;
}

.headerItem {
  flex: none;
  width: 200px;
  min-height: 100px;
  height: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all
}
<div class = "GridTable">
  <div class = "TableHeader">
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
    <div class = "headerItem">time1</div>
  </div>
  <div class = "TableRows">
    <div class = "TableRow">
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      <div class = "headerItem">time2</div>
      // many others column values
    </div>
    <div class = "TableRow">
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      <div class = "headerItem">time</div>
      // many others column values
    </div>
  </div>
</div>

Должно быть больше ответов о поведении inline-block/grid/flex и минимальной ширине;)

17.03.2022 15:29

Другие вопросы по теме

Javascript работает только для одного элемента, только для первого
Таблицы и их содержимое отодвигаются в сторону — почему?
Как разместить изображение в div нестатического размера?
Как добавить текст и img в кнопку значения с помощью jquery
Упорядоченный список 1, 1.1, а
Как разместить строку меню и логотип с помощью css?
В word-break: break-word я хочу использовать первое слово в следующей строке с заглавной буквы с помощью CSS/JS. Возможно ли это?
В маленьком экране из левого css
Я хочу скрыть полосу прокрутки в меню переключения
Селектор не работает для <svg> > <path>

Похожие вопросы

Javascript работает только для одного элемента, только для первого
Нулевая ошибка при использовании document.getElementById()
Таблицы и их содержимое отодвигаются в сторону — почему?
Как разместить изображение в div нестатического размера?
Как получить текст между двумя наборами тегов в python
Как сделать выпадающее меню, которое меняет цвет фона
Как добавить текст и img в кнопку значения с помощью jquery
Упорядоченный список 1, 1.1, а
Administrate gem — передача пользовательских классов HTML в поля
Не могу получить элемент