在添加右側滾動條時保持邊框完整

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 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t background-color: #F5F5F5; 
 
} 
 

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

 
.all-entries::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: black; 
 
\t 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>