用wxml和css代码复刻出这个图片上的表格,图片如下:http://t62.life/Hmv5Es,要求不用table
时间: 2024-06-09 09:11:34 浏览: 9
好的,下面是用wxml和css复刻出这个表格的代码:
```html
<view class="table">
<view class="row header">
<view class="cell">姓名</view>
<view class="cell">年龄</view>
<view class="cell">性别</view>
<view class="cell">城市</view>
</view>
<view class="row">
<view class="cell">张三</view>
<view class="cell">25</view>
<view class="cell">男</view>
<view class="cell">北京</view>
</view>
<view class="row">
<view class="cell">李四</view>
<view class="cell">30</view>
<view class="cell">男</view>
<view class="cell">上海</view>
</view>
<view class="row">
<view class="cell">王五</view>
<view class="cell">28</view>
<view class="cell">女</view>
<view class="cell">广州</view>
</view>
</view>
```
```css
.table {
display: flex;
flex-direction: column;
border: 1px solid #000;
}
.row {
display: flex;
flex-direction: row;
border-top: 1px solid #000;
}
.header {
font-weight: bold;
background-color: #ccc;
}
.cell {
flex: 1;
padding: 8px;
text-align: center;
}
```
这段代码的实现思路是:用 flex 布局将表格变成一列列的行和一行行的单元格,然后设置边框和背景颜色等样式来模拟表格的外观。其中,用 flex: 1 来让单元格自适应宽度,text-align: center 来让文字居中显示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)