Как отобразить HTML-таблицу с помощью CSS Grid

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

Могу ли я создать такую же структуру макета с помощью чего-то вроде CSS Grid или другого? С меткой слева и данными ручного ввода справа?

<table class = "table">
<tbody>
<tr>
<td><strong>Ground Floor</strong></td>
<td>Living Room; Kitchen</td>
</tr>
<tr>
<td><strong>First Floor</strong></td>
<td>Bedroom 1; Bedroom 2; Bathroom</td>
</tr>
</tbody>
</table>

почему нельзя использовать div? видите, вы можете либо вручную создать css, либо использовать для этого сетку BS.

— 04.05.2022 14:03

Для меня это табличные данные. Почему нельзя использовать table?

— 04.05.2022 14:04

"Могу ли я создать такую же структуру макета с помощью чего-то вроде CSS Grid или другого?" - конечно, где ты застрял?

— 04.05.2022 14:09

Вам плохо посоветовали. Этот контент имеет смысл в качестве таблицы. Список определений/описаний также подходит для семантики.

— 04.05.2022 14:15

html css html-table css-grid

04.05.2022 13:58

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

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

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

.container {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.5fr 0.5fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Div1 Div2"
    "Div3 Div4";
}

.Div1 {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . ."
    ". Text-Center1 ."
    ". . .";
  grid-area: Div1;
}

.Text-Center1 { grid-area: Text-Center1; }

.Div2 {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . ."
    ". Text-Center-2 ."
    ". . .";
  grid-area: Div2;
}

.Text-Center-2 { grid-area: Text-Center-2; }

.Div3 {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . ."
    ". Text-Center-3 ."
    ". . .";
  grid-area: Div3;
}

.Text-Center-3 { grid-area: Text-Center-3; }

.Div4 {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . ."
    ". Text-Center-4 ."
    ". . .";
  grid-area: Div4;
}

.Text-Center-4 { grid-area: Text-Center-4; }

<div class = "container">
  <div class = "Div1">
    <div class = "Text-Center1">Text1</div>
  </div>
  <div class = "Div2">
    <div class = "Text-Center-2">Text2</div>
  </div>
  <div class = "Div3">
    <div class = "Text-Center-3">Text3</div>
  </div>
  <div class = "Div4">
    <div class = "Text-Center-4">Text4</div>
  </div>
</div>

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

— 04.05.2022 15:11

04.05.2022 14:08

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

divs не следует использовать для табличных данных. Это так же неправильно, как использование таблиц для макета. Используйте <table>. Это просто, семантически правильно, и вы закончите за 5 минут. @kobi

Ответ на этот вопрос уже есть здесь как-создать-таблицу-только-используя-div-тег

Как вариант:

.css-flex-table {
display: flex;
width: 80%;
}

.css-flex-table-header,
.css-flex-table-body {
display: flex;
flex: 0 0 100%;
}

.css-flex-table,
.css-flex-table-body {
flex-wrap: wrap;
}

.css-flex-table-header div {
padding: 6px;
text-align: center;
font-weight: bold;
background-color: rgb(191, 191, 191);
}

.css-flex-table-header div,
.css-flex-table-body div {
flex: 0 1 100px;
padding: 0 6px;
border: 1px solid rgb(255, 255, 255);
box-sizing: border-box;
}

.css-flex-table-header div:nth-of-type(4n),
.css-flex-table-body div:nth-of-type(4n) {
flex: 0 1 calc(100% - 308px);
}

<div class = "css-flex-table">

<div class = "css-flex-table-header">
<div>Row</div>
<div>First Name</div>
<div>Last Name</div>
<div>Email</div>
</div>

<div class = "css-flex-table-body">
<div>1</div>
<div>John</div>
<div>Carter</div>
<div>[email protected]</div>

<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>[email protected]</div>

<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>[email protected]</div>
</div>
</div>

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

<body>
  <form id = "form1">
      <div class = "div-table">
             <div class = "div-table-row">
                <div class = "div-table-col" align = "center">Customer ID</div>
                <div  class = "div-table-col">Customer Name</div>
                <div  class = "div-table-col">Customer Address</div>
             </div>
            <div class = "div-table-row">
                  <div class = "div-table-col">001</div>
                <div class = "div-table-col">002</div>
                <div class = "div-table-col">003</div>
            </div>
            <div class = "div-table-row">
                <div class = "div-table-col">xxx</div>
                <div class = "div-table-col">yyy</div>
                <div class = "div-table-col">www</div>
           </div>
            <div class = "div-table-row">
                <div class = "div-table-col">ttt</div>
                <div class = "div-table-col">uuu</div>
                <div class = "div-table-col">Mkkk</div>
           </div>

      </div>
  </form>
</body>

Другой пример

#resp-table {
        width: 100%;
        display: table;
    }
    #resp-table-body{
        display: table-row-group;
    }
    .resp-table-row{
        display: table-row;
    }
    .table-body-cell{
        display: table-cell;
        border: 1px solid #dddddd;
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
    }

<div id = "resp-table">
    <div id = "resp-table-body">
        <div class = "resp-table-row"> 
            <div class = "table-body-cell">
                col 1 
            </div>
            <div class = "table-body-cell">
                col 2 
            </div>
            <div class = "table-body-cell">
                col 3 
            </div>
            <div class = "table-body-cell">
                col 4 
            </div>
        </div>
        <div class = "resp-table-row"> 
            <div class = "table-body-cell">
                second row col 1 
            </div>
            <div class = "table-body-cell">
                second row col 2 
            </div>
            <div class = "table-body-cell">
                second row col 3 
            </div>
            <div class = "table-body-cell">
                second row col 4 
            </div>
        </div>
    </div>
</div>

04.05.2022 14:10

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

Flex-column: как ограничить высоту растущей части, чтобы она не расширялась?

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

Удалите все границы, кроме нижней, используя css

Почему так быстро рушится навигация по сайту?

Как инвертировать цвет текста в соответствии с тем, что за ним стоит? (не только фон)

Создание двух списков рядом друг с другом

Размытие фона видео

@supports (-webkit-touch-callout: none) не работает в iOS 15 Safari

Как показать div в моем диалоговом окне sweetalert2?

Центрировать диапазон внутри метки

Как отобразить HTML-таблицу с помощью CSS Grid

Ответы 2

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

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