<template>
<div class="accordion
-container">
<
table class="accordion
-table">
<!
-- 表头
-->
<thead>
<tr>
<th class="text w
-55"
fixed>序号</th>
<th class="text w
-100">变更时间</th>
<th class="text max
-w
-150">变更单</th>
<th class="text w
-250">111</th>
<th class="text w
-55">实施人</th>
<th class="text w
-90">子系统名称</th>
<th class="text w
-105">计划时间与实际时间偏差</th>
<th class="text w
-105">计划时长与实际时长偏差</th>
<th class="w
-100">状态</th>
<th class="text w
-55"
fixed="right">操作</th>
</tr>
</thead>
<!
-- 表主体
-->
<tbody v
-for="i in 3" style="height
: 38px;overflow
: hidden;">
<tr>
<td colspan="10">
<div class="tbodyTitle"><span>应用变更</span></div>
</td>
</tr>
<tr v
-for="item in 10">
<td class="text"
fixed>1</td>
<td class="text">09
-21
:09
:00</td>
<td class="text">09
-21
:09
:0009
-21
:09
:0009
-21
:09
:0009
-21
:09
:0009
-21
:09
:00</td>
<td class="text"></td>
<td class="text">张某某</td>
<td class="text">111</td>
<td class="text">13分钟</td>
<td class="text">13分钟</td>
<td class="text">待实施</td>
<td class="text"
fixed="right">验证</td>
</tr>
</tbody>
</
table>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.accordion
-container {
width
: 100%;
overflow
-x
: auto;
white
-space
: nowrap;
position
: relative;
}
/* ==== 滚动条样式（WebKit 内核：
Chrome / Edge / Safari）==== */
.accordion
-container
::-webkit
-scrollbar {
height
: 4px; /* 横向滚动条高度 */
}
.accordion
-container
::-webkit
-scrollbar
-track {
background
: transparent;
border
-radius
: 0px;
}
.accordion
-container
::-webkit
-scrollbar
-thumb {
background
: #c0c0c0;
border
-radius
: 0px;
}
.accordion
-container
::-webkit
-scrollbar
-thumb
:hover {
background
: #a0a0a0;
}
.accordion
-table {
border
-collapse
: collapse; /* 关键：合并边框，去除单元格间隙 */
border
-spacing
: 0; /* 兼容性兜底 */
thead {}
tbody {}
tbody tr {
background
-color
: #001b32;
}
tr {
height
: 38px;
}
th {
height
: 100%;
padding
: 0 8px;
background
-color
: rgba(23, 100, 187, 0.15);
}
td {
padding
: 0 8px;
height
: 100%;
}
th.text,td.text {
color
: #9caabf;
font
-family
: 'Alibaba_PuHuiTi_55';
font
-size
: 14px;
font
-weight
: 400;
line
-height
: normal;
font
-style
: normal;
}
/*
固定第一
列 */
td[
fixed],
th[
fixed]{
position
: sticky;
left
: -0.5px;
background
-color
: #071C33; /* 背景色防止滚动时透明 */
z
-index
: 10; /* 确保覆盖其他单元格 */
}
td[
fixed='right'],th[
fixed='right'] {
position
: sticky;
right
: -0.5px;
background
-color
: #071C33; /* 背景色防止滚动时透明 */
z
-index
: 10; /* 确保覆盖其他单元格 */
}
.w
-55 { width
: 55px }
.w
-90 { width
: 90px }
.w
-100 { width
: 100px }
.w
-105 { width
: 205px }
.w
-250 { width
: 250px }
.max
-w
-150 { width
: 250px }
.noPading {
padding
: 0;
}
.tbodyTitle {
width
: 874px;
height
: 38px;
box
-sizing
: border
-box;
border
-bottom
: 1px solid rgba(0, 66, 110, 0);
background
: linear
-gradient(90deg, rgba(0, 44, 81, 0) 0%, #002c51 50%, rgba(0, 44, 81, 0) 100%);
cursor
: pointer;
position
: relative;
span {
position
: sticky;
left
: 397px;
top
: 46px;
color
: #fff;
font
-family
: 'HYRunYuan';
font
-size
: 20px;
line
-height
: 24px;
background
: linear
-gradient(0deg, #6fcfff 32.77%, #fff 79.52%);
background
-clip
: text;
-webkit
-background
-clip
: text;
-webkit
-text
-fill
-color
: transparent;
}
}
}
</style>
如何将以上代码改为 div + css
表格布局
本文探讨了在表格中使用固定列宽布局的问题，并提出了使用word-wrap属性解决长文本溢出的方法。通过添加<style>标签，设置word-wrap为break-word或break-all，确保长文本能够优雅地换行，提升用户体验。
扫一扫
1462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
