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 >
<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>
CodePudding user response：
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 >
<div >
<div>Row</div>
<div>First Name</div>
<div>Last Name</div>
<div>Email</div>
</div>
<div >
<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 >
<div >
<div align="center">Customer ID</div>
<div >Customer Name</div>
<div >Customer Address</div>
</div>
<div >
<div >001</div>
<div >002</div>
<div >003</div>
</div>
<div >
<div >xxx</div>
<div >yyy</div>
<div >www</div>
</div>
<div >
<div >ttt</div>
<div >uuu</div>
<div >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 >
<div >
col 1
</div>
<div >
col 2
</div>
<div >
col 3
</div>
<div >
col 4
</div>
</div>
<div >
<div >
second row col 1
</div>
<div >
second row col 2
</div>
<div >
second row col 3
</div>
<div >
second row col 4
</div>
</div>
</div>
</div>CodePudding user response：
.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 >
<div >
<div >Text1</div>
</div>
<div >
<div >Text2</div>
</div>
<div >
<div >Text3</div>
</div>
<div >
<div >Text4</div>
</div>
</div>CodePudding user response：
To create a table using CSS Grid you will need an element (div) as a container, and inner elements (divs) with specified positions.
Container
To make a container, create a div and set its display property to grid, and set grid-template-columns and grid-template-rows for the size of a cell. The unit fr specifies the track's flex factor (size).
Example:
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(2, 1fr);
Elements
You can use the shorthand property called grid-area to set the position of the elements.
These are the values in grid-area:
- grid-row-start
- grid-column-start
- grid-row-end
- grid-column-end
Example:
grid-area: 1 / 1 / 2 / 2;
For the styling elements you can use the CSS properties as usual.
Working example
.parent {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
border: 1px solid #cccccc;
}
.div1 {
grid-area: 1 / 1 / 2 / 2;
padding: 10px;
}
.div2 {
grid-area: 1 / 2 / 2 / 3;
padding: 10px;
}
.div3 {
grid-area: 2 / 1 / 3 / 2;
padding: 10px;
background: #eeeeee;
}
.div4 {
grid-area: 2 / 2 / 3 / 3;
padding: 10px;
background: #eeeeee;
}<div >
<div ><strong>Ground Floor</strong></div>
<div >Living Room; Kitchen</div>
<div ><strong>First Floor</strong></div>
<div >Bedroom 1; Bedroom 2; Bathroom</div>
</div>Tip
You can simply use a CSS Grid generator.