按照图片上表的结构,用css和wxml实现一样的表格
时间: 2024-05-14 15:16:12 浏览: 66
很抱歉,我无法看到您提到的图片。但是,我可以为您提供一些基本的 CSS 和 WXML 代码来创建一个简单的表格。以下是一个示例:
WXML 代码:
```html
<view class="table">
<view class="row header">
<view class="cell">Header 1</view>
<view class="cell">Header 2</view>
<view class="cell">Header 3</view>
</view>
<view class="row">
<view class="cell">Row 1, Cell 1</view>
<view class="cell">Row 1, Cell 2</view>
<view class="cell">Row 1, Cell 3</view>
</view>
<view class="row">
<view class="cell">Row 2, Cell 1</view>
<view class="cell">Row 2, Cell 2</view>
<view class="cell">Row 2, Cell 3</view>
</view>
<view class="row">
<view class="cell">Row 3, Cell 1</view>
<view class="cell">Row 3, Cell 2</view>
<view class="cell">Row 3, Cell 3</view>
</view>
</view>
```
CSS 代码:
```css
.table {
display: table;
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.row {
display: table-row;
border-bottom: 1px solid #ddd;
}
.header {
font-weight: bold;
color: #555;
background-color: #f7f7f7;
}
.cell {
display: table-cell;
padding: 10px;
border: 1px solid #ddd;
}
```
您可以将此代码复制并粘贴到您的项目中,然后根据您的需求进行修改。
阅读全文