html - 添加右滚动条时保持边框完整性

Question

我想制作一个没有表格标签的表格。在表体中添加一定数量的行后，应该会出现一个滚动条。但问题是，当出现垂直滚动条时，表体中单元格的横向边框与表头中的单元格横向边框不对齐。我该怎么做才能解决这个问题？
表头已固定，表体必须可滚动。

这是一个示例代码:

.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>

Answer 1

你可以自定义表格的滚动条试试这个:

.table-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  /*background-color: lightpink;*/
  height: 26px;
  margin-top: 0px;

}

.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%;
}

/* costume scroll bar with 1px width */
.all-entries::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.all-entries::-webkit-scrollbar
{
	width: 2px;
	background-color: #F5F5F5;
}

.all-entries::-webkit-scrollbar-thumb
{
	background-color: black;
	border: 1px solid red;
}

<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>