css代替表格

一、页面部分

<view class="table">

<view class="row rowHeader">

<view class="cell span5">2026-08-08|"音速猫·感恩体育生"2026年第四届济南..</view>

</view>

<view class="row">

<view class="cell">400米</view>

<view class="cell cell-fixed">男子组U14</view>

<view class="cell">决赛</view>

<view class="cell">1'01"66</view>

<view class="cell">第二名</view>

<view class="cell cell-fixed-end">

<image src="./img/huangbt.png" class="table-huangbt"></image>

</view>

</view>

</view>

二、css部分:

.table { width: 100%; }

.row { display: flex; }

.cell {

flex: 1; /* 每列均分 */

border: 1px solid #eee;

padding: 8rpx;

text-align: center;

font-size: 24rpx;

}

.cell-fixed {

flex: 0 0 160rpx; /* 固定 200rpx,不伸缩 */

width: 160rpx;

}

.cell-fixed-end {

flex: 0 0 40rpx; /* 固定 200rpx,不伸缩 */

width: 40rpx;

}

.span5 {

flex: 6;

text-align: left;

color: #fff;

padding-left: 10rpx;

box-sizing: border-box;

}

.rowHeader{

background-color: #BD986B;

border-top-left-radius: 20rpx;

border-top-right-radius: 20rpx;

}

相关推荐
AiMan1 分钟前
Grok生成的内容能否下载吗?
前端
徐小夕29 分钟前
JitArchives,一款基于JitWord协同AI文档打造的企业级电子档案系统
前端·vue.js·github
陈随易35 分钟前
Node.js 2026上半年都有哪些性能提升?
前端·后端·程序员
墨林陌1 小时前
AI 热点日报(2026-11-09):苹果代理式Siri曝光,Anthropic推进IPO,编码智能体实测翻车
前端
vipxieliang1 小时前
JavaScript 迭代器与生成器:控制异步与惰性求值
前端·javascript
Hilaku1 小时前
Event Loop 这篇你看完就不用再看别的了!
前端·javascript·程序员
恋猫de小郭2 小时前
Flutter 下 AOT 一个你怎么都想不出来的 Bug ,JIT 正常的计算,在 AOT 居然算错了
android·前端·flutter
晓得迷路了2 小时前
栗子前端技术周刊第 153 期 - Vitest 5.1、Remix v3.2、Node.js 27 Alpha...
前端·javascript·vite
Moment3 小时前
Harness Engineering 为什么是 AI Coding 的工程底座 ❓❓❓
前端·后端·面试