wxml和wxss写一个表格
时间: 2024-05-12 21:18:20 浏览: 20
好的,下面是一个简单的wxml和wxss实现表格的示例代码:
wxml代码:
```html
<view class="table">
<block wx:for="{{tableData}}" wx:key="{{index}}">
<view class="tr">
<view class="td">{{item.col1}}</view>
<view class="td">{{item.col2}}</view>
<view class="td">{{item.col3}}</view>
</view>
</block>
</view>
```
wxss代码:
```css
.table {
display: table;
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
border: 1px solid #eee;
padding: 10px;
text-align: center;
}
.tr:first-child .td {
font-weight: bold;
background-color: #f2f2f2;
}
```
其中,tableData是一个包含表格数据的数组,一行数据包含三列数据(col1、col2、col3)。你可以将其替换为实际的数据。
以上代码实现了一个简单的三列表格,表头加粗并添加浅灰色背景色,单元格带有边框和内边距,并居中显示。你可以根据需要进行修改。