<template>
<
table class="data
-table">
<!
-- 表头行
-->
<tr>
<th class="label">项目</th>
<th v
-for="(header, index) in headers"
:key="index">{{ header }}</th>
</tr>
<!
-- 普通数据行
-->
<tr v
-for="(row, rowIndex) in normalRows"
:key="rowIndex">
<td class="label">{{ row.label }}</td>
<td v
-for="(col, colIndex) in row.columns"
:key="colIndex">
{{ col.value }}
</td>
</tr>
<!
-- "便"行特殊处理
- 改为横向三
列 -->
<tr>
<!
-- 第一
列标签（只显示在第一行）
-->
<td class="label" rowspan="1">便</td>
<!
-- 遍历每一
列 -->
<td
v
-for="(col, colIndex) in specialRow.columns"
:key="`col
-${colIndex}`"
class="special
-cell"
>
<!
-- 每个单元格内展示三个值，横向排
列 -->
<div class="cell
-content">
<span v
-for="(value, subIndex) in col.values"
:key="subIndex">
{{ value }}
</span>
</div>
</td>
</tr>
</
table>
</template>
<script setup>
import { ref, reactive } from 'vue';
// 表头数据
const headers = ref(['周一', '周二', '周三', '周四', '周五']);
// 普通行数据
const normalRows = reactive([
{
label
: '日期',
columns
: Array(5).fill({ value
: '1998
-10
-30' })
},
{
label
: '天气',
columns
: Array(5).fill({ value
: '晴' })
},
{
label
: '气温',
columns
: Array(5).fill({ value
: '38℃' })
}
]);
// 特殊行数据
const specialRow = reactive({
label
: '便',
columns
: Array(5).fill({
values
: ['1', '2', '3'] // 每个单元格包含3个子值
})
});
</script>
<style scoped>
/* 基础表格样式
- 确保边框完美对齐 */
.data
-table {
width
: 100%;
border
-collapse
: collapse; /* 关键：合并边框 */
border
-spacing
: 0;
margin
: 20px 0;
font
-family
: Arial, sans
-serif;
table-layout: fixed; /* 固定布局确保
列宽一致 */
}
.data
-table th,
.data
-table td {
padding
: 0; /* 移除内边距，由内部元素控制 */
text
-align
: center;
border
: 1px solid #ccc; /* 统一边框样式 */
position
: relative;
height
: 40px; /* 固定行高 */
vertical
-align
: middle; /* 内容垂直居中 */
}
.data
-table th {
background
-color
: #f0f0f0;
font
-weight
: bold;
padding
: 12px 15px; /* 表头保留内边距 */
}
.label {
background
-color
: #f5f5f5;
width
: 15%;
font
-weight
: bold;
padding
: 12px 15px; /* 标签
列保留内边距 */
}
/* 特殊单元格样式 */
.special
-cell {
padding
: 0 !important;
border
-left
: 1px solid #ccc;
border
-right
: 1px solid #ccc;
}
/* 单元格内容容器 */
.cell
-content {
display
: flex;
align
-items
: center;
justify
-content
: center;
height
: 100%;
width
: 100%;
padding
: 10px 0; /* 内部垂直间距 */
box
-sizing
: border
-box;
}
/* 特殊行的边框处理 */
.data
-table tr
:last
-child td {
border
-bottom
: 1px solid #ccc !important;
}
/* 确保特殊单元格的边框完美对齐 */
.special
-cell
:first
-child {
border
-left
: none;
}
.special
-cell
:last
-child {
border
-right
: none;
}
</style>
怎么将便的123拆成三
列
本文探讨了在使用CSS的table-layout:fixed属性时遇到的问题，即第一行使用colspan后，后续单元格宽度无法正常设置。通过在table中加入colgroup元素并设定各列宽度，解决了单元格宽度分配不均的问题。
扫一扫
1950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
