如何使用 CSS 网格显示 HTML Table

Question

有人建议我不要使用 tables 进行布局，因为 table 结构与我使用它的方式没有任何意义。

我可以用 CSS 网格或其他类似的东西创建相同的布局结构吗？标签在左边，手动输入数据在右边？

<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>

Answer 1

.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>

Answer 2

divs 不应用于表格数据。这与使用表格进行布局一样错误。使用 <table>。它简单、语义正确，您将在 5 分钟内完成。 @kobi

这里已经回答了这个问题how-create-table-only-using-div-tag

作为一个选项：

.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>johncarter@mail.com</div>

<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>peterparker@mail.com</div>

<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>johnrambo@mail.com</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>

如何使用 CSS 网格显示 HTML Table

How to display HTML Table with CSS Grid

html

css

html-table

css-grid