文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >添加右滚动条时保持边框完整性

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

Stack Overflow用户
提问于 2017-10-21 23:33:10
回答 1查看 13关注 0票数 0

我想做一张没有桌子标签的桌子。表体新增一定行数后，会出现滚动条。但问题是，当出现垂直滚动条时，表体单元格的横向边框与表头单元格侧边框不对齐。我能做些什么来解决这个问题？

表头是固定的，表体必须是可滚动的。

下面是一个示例代码：

​

代码语言：javascript
复制
.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%;
}
代码语言：javascript
复制
<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>

​

html
css
EN

回答 1

Stack Overflow用户

发布于 2017-10-21 23:39:41

您可以自定义表格的滚动条，尝试如下所示：

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/46864891

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档