我想用FlexBox创建一个表。 输出应该是这样的:
我尝试过的代码是:
null
.row {
display: flex;
}
.field {
flex-grow: 1;
}<div class="row">
<div class="field">Name</div>
<div class="field">DOB</div>
<div class="field">Address</div>
<div class="field">Telephone Number</div>
<div class="field">Sex</div>
</div>
<div class="row">
<div class="field">Peter Parker</div>
<div class="field">28/02/1991</div>
<div class="fieldgrow">
Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
</div>
<div class="field">1233</div>
<div class="field">M</div>
</div>
<div class="row">
<div class="field">Peter Parker</div>
<div class="field">28/02/1991</div>
<div class="fieldgrow">
Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
</div>
<div class="field">1233</div>
<div class="field">M</div>
</div>null
我是HTML和CSS的新手。 我哪里犯错了？ 谁能帮帮忙吗？
您需要稍微更改HTML和CSS。 这看起来完全像一个HTML表:
null
.flex {
display: flex;
}
.row {
flex: 1;
border: 1px solid grey;
}<div class="flex">
<div class="row">
Name
</div>
<div class="row">
DOB
</div>
<div class="row">
Address
</div>
<div class="row">
Telephone Number
</div>
<div class="row">
Sex
</div>
</div>
<div class="flex">
<div class="row">
Peter Parker
</div>
<div class="row">
28/02/1991
</div>
<div class="row">
Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
</div>
<div class="row">
1233
</div>
<div class="row">
M
</div>
</div>
<div class="flex">
<div class="row">
Peter Parker
</div>
<div class="row">
28/02/1991
</div>
<div class="row">
Lorem ipsum, or lipsum as it is sometimes known, is a dummy text.
</div>
<div class="row">
1233
</div>
<div class="row">
M
</div>
</div>
您可以像对子div一样使用CSS
.row {
display: flex;
flex-wrap: nowrap;
background-color: greenyellow
}
.row>div {
flex-grow: 1;
background-color: #f1f1f1;
width: 100px;
margin: 10px;
line-height: 75px;
font-size: 30px;
}
您的表将被定义为
