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

时间：2017-10-21 15:33:10

标签： html css

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

以下是示例代码：

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

1 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题