'How to display HTML Table with CSS Grid
I was advised not to use tables for layout, because the table structure doesn't make sense the way I've used it.
Can I create this same layout structure with something like CSS Grid or other? With label to the left and manual entry data to the right?
<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>
Solution 1:[1]
divs shouldn't be used for tabular data. That is just as wrong as using tables for layout.
Use a <table>. Its easy, semantically correct, and you'll be done in 5 minutes.
@kobi
This question is already answered here how-create-table-only-using-div-tag
As an option:
.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>Another example
#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>Solution 2:[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>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | ianmuraw |