如何使用css删除表中每个td之间的空间?

时间:2019-05-06 22:19:16

标签: html css

我已经创建了一个表格,但是在手机和平​​板电脑上,用白色线条分隔了每个td。有什么解决方案可以在不重构整个表的情况下删除它们?

我尝试了很多其他与我的问题很接近的解决方案。例如,border =“ 0”或“ 1”,border-collpase(已应用)等。 较粗的白线就可以了,只是每吨中的小条 Example Picture of white lines

.table {
  display: table;
  background: #fff;
  width: 100%;
  margin-top: 10px;
  border: 1px solid #fff;
  border-width: 30px 10px 10px 0px;
  /* padding: 15px 15px 15px 5px; */
  border-collapse: collapse;
}

.spacer{
  display:  none;
}


 table .tr-border td {
    border-bottom: 1px solid #0456A1;
  }
  table .tr-border-top{
    border-top: 1px solid #0456A1;
  }
  
  table .tr-border .line-break{
    border-bottom: 1px solid #fff;
  }

.line-break-2{
  border-bottom: 1px solid #0456A1;
}

.table-head-text {
  font-size: 14px;
  width: 3%;
  color: #0d56a4;
  text-transform: uppercase;
  font-family: "UniversLTStd-BoldCn";
}

td {
  border: none;
  color: #5b5a5a;
  font-size: 14px;
  padding: 5px 0px 0px 15px;
  font-family: "UniversLTStd-LightCn";
}

/*.left-td{
    padding: 5px 0px 5px 25px;
}*/

.bk {
  background: #d0d2d3;
  padding-top: 10px;
  padding-bottom: 10px;
}

.bottom-table-text{
  position: relative;
  top: 3px;
}

.table-year-1 {
  background: #0d56a4;
  color: #d0d2d3;
  padding-right: 8px;
  font-size: 16px;
  width: 1%;
  text-align: right;
  font-family: "UniversLTStd-Cn";
}

span.loss-span {
  display: block;
}

.table-year-2 {
  background: #5b5a5a;
  color: #d0d2d3;
  font-size: 16px;
  width: 1%;
  text-align: right;
  padding-right: 8px;
  font-family: "UniversLTStd-Cn";
}

.bottom-number{
  padding-top: 60px;
}

.bottom-number-2{
  padding-top:25px;
}

.bottom-number-3{
  padding-top: 20px;
  font-family: "UniversLTStd-Cn";
  font-weight: bold;
  color: #fff;
  padding-bottom: 10px;
}

.left-td-3{
    padding-top: 15px;
}

.top-year-text{
  padding-top:15px;
}

.block-text{
  padding-top: 10px;
}

.bold{
  font-family: "UniversLTStd-Cn";
  font-weight: bold;
  color: #fff;
  padding-bottom: 10px;
  padding-top: 10px;
  letter-spacing: 1px;
}
.border {
  border-bottom: 1px solid #0456A1;
}
<table class="table">
  <tbody>
    <tr>
      <td class="table-head-text top-table-text left-td-2">Assets</td>
      <td class="table-year-1 bold top-year-text">2018</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2 bold top-year-text">2017</td>
    </tr>
    <tr>
      <td class="left-td left-td-2">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 class="left-td left-td-2">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 class="left-td left-td-2">Loans <span class="soc-head-text-1">(net of valuation reserve)</span> <span class="soc-head-text-2">($28,582 in 2018 &amp; <span class="soc-head-text-1">$27,063 in 2017)</span></span>
      </td>
      <td class="table-year-1 bottom-number">$1,902,960</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2 bottom-number">$1,813,062</td>
    </tr>
    <tr>
      <td class="left-td left-td-2">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 class="left-td left-td-2">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 class="left-td left-td-2">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 class="left-td left-td-2">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 left-td-2">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 left-td-3">Liabilities &amp; <span class="soc-head-text-1">Capital Funds</span></td>
      <td class="table-year-1">&nbsp;</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2">&nbsp;</td>
    </tr>
    <tr>
      <td class="left-td left-td-2">Non-Interest Bearing <span class="soc-head-text-1">Deposits</span></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 class="left-td left-td-2">Non-Interest Bearing <span class="soc-head-text-1">Public Deposits</span></td>
      <td class="table-year-1 bottom-number-2">$190,104</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2 bottom-number-2">$179,582</td>
    </tr>
    <tr>
      <td class="left-td left-td-2">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 class="left-td left-td-2">Interest Bearing <span class="soc-head-text-1">Public Deposits</span></td>
      <td class="table-year-1 bottom-number-2">$370,094</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2 bottom-number-2">$274,994</td>
    </tr>
    <tr class="tr-border">
      <td class="table-head-text left-td-2">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 class="block-text left-td left-td-2">Other Liabilities</td>
      <td class="table-year-1 block-text">$22,497</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2 block-text">$22,954</td>
    </tr>
    <tr>
      <td class="left-td left-td-2">Fed Funds Purchase &amp; <span class="soc-head-text-1">Other Borrowed Money</span></td>
      <td class="table-year-1 bottom-number-2">$0</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2 bottom-number-2">$63,394</td>
    </tr>
    <tr class="tr-border">
      <td class="table-head-text left-td left-td-2">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 left-td-3">Capital Accounts</td>
      <td class="table-year-1">&nbsp;</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2">&nbsp;</td>
    </tr>
    <tr>
      <td class="left-td left-td-2">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 class="left-td left-td-2">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 class="left-td left-td-2">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 class="left-td left-td-2">Unrealized Gain <span class="loss-span"><span class="soc-head-text-1">(Loss) Securities</span></span>
      </td>
      <td class="table-year-1 bottom-number-2">($15,384)</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2 bottom-number-2">($5,558)</td>
    </tr>
    <tr class="tr-border">
      <td class="table-head-text left-td-2 left-td-4">Total Capital Accounts</td>
      <td class="table-year-1 line-break bottom-number-3">$276,232</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2 line-break bottom-number-3">$253,898</td>
    </tr>
    <tr>
      <td class="table-head-text bk"><span class="bottom-table-text">Total Liabilities &amp; <span class="soc-head-text-1">Capital Accounts</span></span>
      </td>
      <td class="table-year-1 line-break-2 bottom-number-3">$3,156,040</td>
      <td class="spacer">&nbsp;</td>
      <td class="table-year-2 line-break-2 bottom-number-3">$2,883,123</td>
    </tr>
    <tr class="tr-border-top">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

2 个答案:

答案 0 :(得分:0)

尝试将outline的{​​{1}}和border属性设置为none

td

答案 1 :(得分:0)

您尝试使用

  

边界崩溃:分开;

在.table中?