0
我想制作一张没有表格标签的表格。将一定数量的行添加到表体后,应该会出现一个滚动条。但问题是,当垂直滚动条出现时,表格中单元格的横向边框与标题中的单元格不一致。我能做些什么来解决这个问题?
标题已修复,表格的主体必须可滚动。在添加右侧滚动条时保持边框完整
这里是一个示例代码:
.table-header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-top: 0px;
}
.fixedheader {
background-color: pink;
}
.table-header>* {
color: rgb(76, 112, 121);
padding: 0px 5px;
width: 100%;
height: 25px;
font-size: 11px;
/*margin: 0;*/
text-align: center;
font-weight: 400;
border-color: rgb(222,227,232);
border-style: solid;
border-width: 1px;
border-collapse: collapse;
margin: 0 0;
line-height: 25px;
}
/* .account-body {
overflow-y: auto;
} */
.all-entries {
overflow-y: auto;
}
.date {
min-width: 80.2px;
width: 5%;
}
.payee {
min-width: 119px;
width: 15%;
}
.category {
min-width: 182.2px;
width: 40%;
}
.memo {
min-width: 122.2px;
width: 25%
}
.outflow {
min-width: 71.2px;
width: 10%;
}
.inflow {
min-width: 71.2px;
width: 10%;
}
<div class="accout body">
<div class="table-header fixedheader" >
<h5 class="date">DATE</h5>
<h5 class="payee">PAYEE</h5>
<h5 class="category">CATEGORY</h5>
<h5 class="memo">MEMO</h5>
<h5 class="outflow">OUTFLOW</h5>
<h5 class="inflow">INFLOW</h5>
</div>
<div class="all-entries">
<div class="article-row">
<div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div>
<div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div>
<div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div>
<div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div>
<div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div>
<div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div>
<div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div>
<div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div><div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div><div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div><div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div><div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div><div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div><div class="table-header">
<h5 class="date">2017/12/12</h5>
<h5 class="payee">Someone</h5>
<h5 class="category">Somestuff</h5>
<h5 class="memo">Nothing special</h5>
<h5 class="outflow">200</h5>
<h5 class="inflow">0</h5>
</div>
</div>
</div>
</div>
隐藏滚动条plausi但是,如果不隐藏它,没有办法做到这一点吗? –