按照图片链接:http://t62.life/Hmv5Es上表的结构,用css和wxml实现一样的表格
时间: 2024-06-09 11:11:34 浏览: 82
好的,我会尝试回答您的问题。
首先,我们需要在wxml文件中添加一个表格,然后使用CSS样式对其进行样式设置。
以下是wxml代码示例:
```html
<view class="table">
<view class="row">
<view class="cell header">姓名</view>
<view class="cell header">年龄</view>
<view class="cell header">性别</view>
</view>
<view class="row">
<view class="cell">张三</view>
<view class="cell">20</view>
<view class="cell">男</view>
</view>
<view class="row">
<view class="cell">李四</view>
<view class="cell">25</view>
<view class="cell">女</view>
</view>
</view>
```
接下来,我们需要在CSS文件中添加样式来设置表格的外观。
以下是CSS代码示例:
```css
.table {
border-collapse: collapse;
width: 100%;
}
.cell {
border: 1px solid #ccc;
padding: 10rpx;
text-align: center;
}
.header {
font-weight: bold;
background-color: #eee;
}
```
以上代码设置了表格的边框、单元格的边框、单元格的内边距、单元格内容的居中对齐以及表头的样式。
最终的表格效果应该和您给出的图片链接中的表格相似。
希望我的回答能对您有所帮助!
阅读全文