gpt4 book ai didi

html - 如何将表格中的部分边框更改为不同的颜色?

转载 作者:行者123 更新时间:2023-11-28 19:27:16 25 4
gpt4 key购买 nike

.table {
background: #fff;
position: relative;
bottom: 210px;
width: 90%;
border: 2px solid #fff;
border-width: 30px;
border-collapse: collapse;
}

.table-year-1 {
font-size: 22px;
width: 2%;
padding-top: 3px;
}
.table-year-2 {
width: 2%;
font-size: 22px;
padding-top: 3px;
}

.table-head-text {
font-size: 18px;
padding-bottom: 8px;
padding-top: 8px;
}

.bk{
font-size:23px;
padding-top: 15px;
padding-bottom: 15px;
}

.top-table-text{
font-size: 26px;
}

table .tr-border{
border-bottom: 1px solid #4f91d8;
}
table .tr-border-top{
border-top: 1px solid #4f91d8;
}

.spacer{
display: table-cell;
width: 3%;
}

td {
font-size: 19px;
padding: 0px 0px 0px 10px;
}
<table class="table">
<tbody>
<tr>
<td class="table-head-text top-table-text">Assets</td>
<td class="table-year-1 bold">2018</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold">2017</td>
</tr>
<tr>
<td>Cash &amp; Due From Banks</td>
<td class="table-year-1">$149,753</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$77,515</td>
</tr>
<tr>
<td>Investment Securities</td>
<td class="table-year-1">$929,432</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$830,878</td>
</tr>
<tr>
<td>Loans (net of valuation reserve)<br />
($28,582 in 2018 &amp; $27,063 in 2017)</td>
<td class="table-year-1">$1,902,960</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$1,813,062</td>
</tr>
<tr>
<td>Federal Funds Sold</td>
<td class="table-year-1">$0</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$0</td>
</tr>
<tr>
<td>Premises &amp; Equipment</td>
<td class="table-year-1">$49,956</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$46,666</td>
</tr>
<tr>
<td>Accured Income</td>
<td class="table-year-1">$12,652</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$12,589</td>
</tr>
<tr>
<td>Other Assets</td>
<td class="table-year-1">$111,287</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$102,413</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Assets</td>
<td class="table-year-1 bold line-break">$3,156,040</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$2,883,123</td>
</tr>
<tr>
<td class="table-head-text top-table-text">Liabilities &amp;
Capital Funds</td>
<td class="table-year-1 line-break-2">&nbsp;</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 line-break-2">&nbsp;</td>
</tr>
<tr>
<td>Non-Interest Bearing Deposits</td>
<td class="table-year-1">$952,623</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$894,075</td>
</tr>
<tr>
<td>Non-Interest Bearing Public Deposits</td>
<td class="table-year-1">$190,104</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$179,582</td>
</tr>
<tr>
<td>Interest Bearing Deposits</td>
<td class="table-year-1">$1,344,490</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$1,194,226</td>
</tr>
<tr>
<td>Interest Bearing Public Deposits</td>
<td class="table-year-1">$370,094</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$274,994</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Deposits</td>
<td class="table-year-1 bold line-break">$2,857,311</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$2,542,877</td>
</tr>
<tr>
<td>Other Liabilities</td>
<td class="table-year-1 line-break-2">$22,497</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 line-break-2">$22,954</td>
</tr>
<tr>
<td>Fed Funds Purchase &amp; Other Borrowed Money</td>
<td class="table-year-1">$0</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$63,394</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Liabilities</td>
<td class="table-year-1 bold line-break">$2,879,808</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$2,629,225</td>
</tr>
<tr>
<td class="table-head-text top-table-text">Capital
Accounts</td>
<td class="table-year-1 line-break-2">&nbsp;</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 line-break-2">&nbsp;</td>
</tr>
<tr>
<td>Capital Stock</td>
<td class="table-year-1">$2,500</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$2,500</td>
</tr>
<tr>
<td>Surplus</td>
<td class="table-year-1">$100,943</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$79,188</td>
</tr>
<tr>
<td>Undivided Profits</td>
<td class="table-year-1">$188,173</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$177,768</td>
</tr>
<tr>
<td>Unrealized Gain <span class="loss-span">(Loss)
Securities</span></td>
<td class="table-year-1">($15,384)</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">($5,558)</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Capital Accounts</td>
<td class="table-year-1 bold line-break">$276,232</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$253,898</td>
</tr>
<tr class="tr-border">
<td class="table-head-text bk">Total Liabilities &amp;
Capital Accounts</td>
<td class="table-year-1 bold line-break-2">$3,156,040</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break-2">$2,883,123</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>

我创建了一个在某些部分带有边框的表格。我需要将底部边框更改为白色(与蓝色和灰色部分相接的地方)。现在边框都是一种颜色。我正在尝试添加白色,所以看起来有一些分离。下图也显示了我想要得到的东西。边框是蓝色的,然后在某些部分的蓝色和灰色部分下面是白色的,以显示分离。

Example

<table class="table">
<tbody>
<tr>
<td class="table-head-text top-table-text">Assets</td>
<td class="table-year-1 bold">2018</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold">2017</td>
</tr>
<tr>
<td>Cash &amp; Due From Banks</td>
<td class="table-year-1">$149,753</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$77,515</td>
</tr>
<tr>
<td>Investment Securities</td>
<td class="table-year-1">$929,432</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$830,878</td>
</tr>
<tr>
<td>Loans (net of valuation reserve)<br />
($28,582 in 2018 &amp; $27,063 in 2017)</td>
<td class="table-year-1">$1,902,960</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$1,813,062</td>
</tr>
<tr>
<td>Federal Funds Sold</td>
<td class="table-year-1">$0</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$0</td>
</tr>
<tr>
<td>Premises &amp; Equipment</td>
<td class="table-year-1">$49,956</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$46,666</td>
</tr>
<tr>
<td>Accured Income</td>
<td class="table-year-1">$12,652</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$12,589</td>
</tr>
<tr>
<td>Other Assets</td>
<td class="table-year-1">$111,287</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$102,413</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Assets</td>
<td class="table-year-1 bold line-break">$3,156,040</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$2,883,123</td>
</tr>
<tr>
<td class="table-head-text top-table-text">Liabilities &amp;
Capital Funds</td>
<td class="table-year-1 line-break-2">&nbsp;</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 line-break-2">&nbsp;</td>
</tr>
<tr>
<td>Non-Interest Bearing Deposits</td>
<td class="table-year-1">$952,623</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$894,075</td>
</tr>
<tr>
<td>Non-Interest Bearing Public Deposits</td>
<td class="table-year-1">$190,104</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$179,582</td>
</tr>
<tr>
<td>Interest Bearing Deposits</td>
<td class="table-year-1">$1,344,490</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$1,194,226</td>
</tr>
<tr>
<td>Interest Bearing Public Deposits</td>
<td class="table-year-1">$370,094</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$274,994</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Deposits</td>
<td class="table-year-1 bold line-break">$2,857,311</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$2,542,877</td>
</tr>
<tr>
<td>Other Liabilities</td>
<td class="table-year-1 line-break-2">$22,497</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 line-break-2">$22,954</td>
</tr>
<tr>
<td>Fed Funds Purchase &amp; Other Borrowed Money</td>
<td class="table-year-1">$0</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$63,394</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Liabilities</td>
<td class="table-year-1 bold line-break">$2,879,808</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$2,629,225</td>
</tr>
<tr>
<td class="table-head-text top-table-text">Capital
Accounts</td>
<td class="table-year-1 line-break-2">&nbsp;</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 line-break-2">&nbsp;</td>
</tr>
<tr>
<td>Capital Stock</td>
<td class="table-year-1">$2,500</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$2,500</td>
</tr>
<tr>
<td>Surplus</td>
<td class="table-year-1">$100,943</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$79,188</td>
</tr>
<tr>
<td>Undivided Profits</td>
<td class="table-year-1">$188,173</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$177,768</td>
</tr>
<tr>
<td>Unrealized Gain <span class="loss-span">(Loss)
Securities</span></td>
<td class="table-year-1">($15,384)</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">($5,558)</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Capital Accounts</td>
<td class="table-year-1 bold line-break">$276,232</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$253,898</td>
</tr>
<tr class="tr-border">
<td class="table-head-text bk">Total Liabilities &amp;
Capital Accounts</td>
<td class="table-year-1 bold line-break-2">$3,156,040</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break-2">$2,883,123</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>

最佳答案

tr 是表格行,所以边框底线将是表格的宽度。要匹配您的图像,您需要改为定位单个单元格 (td)。

看起来你很亲近。例如,将 table .tr-border 更改为 table .tr-border td。然后您可以将规则添加到目标 table .tr-border .table-year-1table .tr-border .table-year-2

生成如下内容?

.table {
background: #fff;
position: relative;
bottom: 210px;
width: 90%;
border: 2px solid #fff;
border-width: 30px;
border-collapse: collapse;
}

.table-year-1 {
font-size: 22px;
width: 2%;
padding-top: 3px;
background-color: #4f91d8;
}
.table-year-2 {
width: 2%;
font-size: 22px;
padding-top: 3px;
background-color: #CCC;
}

.table-head-text {
font-size: 18px;
padding-bottom: 8px;
padding-top: 8px;
}

.bk{
font-size:23px;
padding-top: 15px;
padding-bottom: 15px;
}

.top-table-text{
font-size: 26px;
}

table .tr-border td{
border-bottom: 1px solid #4f91d8;
}

table .tr-border .table-year-1 {
background-color: #4f91d8;
border-bottom: 1px solid #FFF;
}

table .tr-border .table-year-2 {
background-color: #CCC;
border-bottom: 1px solid #FFF;
}

.spacer{
display: table-cell;
width: 3%;
}

td {
font-size: 19px;
padding: 0px 0px 0px 10px;
}
<table class="table">
<tbody>
<tr>
<td class="table-head-text top-table-text">Assets</td>
<td class="table-year-1 bold">2018</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold">2017</td>
</tr>
<tr>
<td>Cash &amp; Due From Banks</td>
<td class="table-year-1">$149,753</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$77,515</td>
</tr>
<tr>
<td>Investment Securities</td>
<td class="table-year-1">$929,432</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$830,878</td>
</tr>
<tr>
<td>Loans (net of valuation reserve)<br />
($28,582 in 2018 &amp; $27,063 in 2017)</td>
<td class="table-year-1">$1,902,960</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$1,813,062</td>
</tr>
<tr>
<td>Federal Funds Sold</td>
<td class="table-year-1">$0</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$0</td>
</tr>
<tr>
<td>Premises &amp; Equipment</td>
<td class="table-year-1">$49,956</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$46,666</td>
</tr>
<tr>
<td>Accured Income</td>
<td class="table-year-1">$12,652</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$12,589</td>
</tr>
<tr>
<td>Other Assets</td>
<td class="table-year-1">$111,287</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$102,413</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Assets</td>
<td class="table-year-1 bold line-break">$3,156,040</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$2,883,123</td>
</tr>
<tr>
<td class="table-head-text top-table-text">Liabilities &amp;
Capital Funds</td>
<td class="table-year-1 line-break-2">&nbsp;</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 line-break-2">&nbsp;</td>
</tr>
<tr>
<td>Non-Interest Bearing Deposits</td>
<td class="table-year-1">$952,623</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$894,075</td>
</tr>
<tr>
<td>Non-Interest Bearing Public Deposits</td>
<td class="table-year-1">$190,104</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$179,582</td>
</tr>
<tr>
<td>Interest Bearing Deposits</td>
<td class="table-year-1">$1,344,490</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$1,194,226</td>
</tr>
<tr>
<td>Interest Bearing Public Deposits</td>
<td class="table-year-1">$370,094</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$274,994</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Deposits</td>
<td class="table-year-1 bold line-break">$2,857,311</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$2,542,877</td>
</tr>
<tr>
<td>Other Liabilities</td>
<td class="table-year-1 line-break-2">$22,497</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 line-break-2">$22,954</td>
</tr>
<tr>
<td>Fed Funds Purchase &amp; Other Borrowed Money</td>
<td class="table-year-1">$0</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$63,394</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Liabilities</td>
<td class="table-year-1 bold line-break">$2,879,808</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$2,629,225</td>
</tr>
<tr>
<td class="table-head-text top-table-text">Capital
Accounts</td>
<td class="table-year-1 line-break-2">&nbsp;</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 line-break-2">&nbsp;</td>
</tr>
<tr>
<td>Capital Stock</td>
<td class="table-year-1">$2,500</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$2,500</td>
</tr>
<tr>
<td>Surplus</td>
<td class="table-year-1">$100,943</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$79,188</td>
</tr>
<tr>
<td>Undivided Profits</td>
<td class="table-year-1">$188,173</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">$177,768</td>
</tr>
<tr>
<td>Unrealized Gain <span class="loss-span">(Loss)
Securities</span></td>
<td class="table-year-1">($15,384)</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2">($5,558)</td>
</tr>
<tr class="tr-border">
<td class="table-head-text">Total Capital Accounts</td>
<td class="table-year-1 bold line-break">$276,232</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break">$253,898</td>
</tr>
<tr class="tr-border">
<td class="table-head-text bk">Total Liabilities &amp;
Capital Accounts</td>
<td class="table-year-1 bold line-break-2">$3,156,040</td>
<td class="spacer">&nbsp;</td>
<td class="table-year-2 bold line-break-2">$2,883,123</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>

关于html - 如何将表格中的部分边框更改为不同的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55922059/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com