如何在表格的/标记上添加边框

时间:2019-04-02 12:26:25

标签: html css css3

当我使用下面的代码时,我可以在td标签上获得背景颜色,但不能获得边框。我也无法在两个td标签之间添加间距。我尝试过cellpacing和cellpadding

.bd-highlight {
  margin: 12px 12px 12px 12px;
  padding-right: 20px;
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 135px;
  height: 10px;
  border-color: white;
}
<div class="row" id="columntab">
  <div class="col-6" id="columnmain">
    <table class="t1" cellspacing="10">
      <tbody>
        <tr>
          <th class="bd-highlight"><a href="download/EXTC/SEM3 CBCGS/EIC/SE-EXTC_SEM3_EIC-CBCGS_DEC18.pdf" download="">Dec 2018</a></th>
          <th><a href="download/EXTC/SEM3 CBCGS/EIC/SE-EXTC_SEM3_EIC-CBCGS_MAY18.pdf" download="">May 2018</a></th>
          <th><a href="download/EXTC/SEM3 CBCGS/EIC/SE-EXTC_SEM3_EIC-CBCGS_DEC17.pdf" download="">Dec 2017</a></th>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-3">
    2 of 3 (wider)
  </div>
  <div class="col-3">
    3 of 3
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

您必须使用border:5px(border-width) solid(type) #ff0000(custom-color);

   table tbody tr td,
    table tbody tr th
    {
       margin: 12px 12px 12px 12px;
       padding-right: 20px;
       border-radius: 25px;
       background: #73AD21;
       padding: 20px;
      width: 135px;
      height: 10px;
      border:5px solid #f00;
    }

/*.bd-highlight {
  margin: 12px 12px 12px 12px;
  padding-right: 20px;
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 135px;
  height: 10px;
  border-color: white;
}*/

table tbody tr td,
table tbody tr th
{
  margin: 12px 12px 12px 12px;
  padding-right: 20px;
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 135px;
  height: 10px;
  border:5px solid #f00;
}
<div class="row" id="columntab">
  <div class="col-6" id="columnmain">
    <table class="t1" cellspacing="10">
      <tbody>
        <tr>
          <th class="bd-highlight"><a href="download/EXTC/SEM3 CBCGS/EIC/SE-EXTC_SEM3_EIC-CBCGS_DEC18.pdf" download="">Dec 2018</a></th>
          <th><a href="download/EXTC/SEM3 CBCGS/EIC/SE-EXTC_SEM3_EIC-CBCGS_MAY18.pdf" download="">May 2018</a></th>
          <th><a href="download/EXTC/SEM3 CBCGS/EIC/SE-EXTC_SEM3_EIC-CBCGS_DEC17.pdf" download="">Dec 2017</a></th>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-3">
    2 of 3 (wider)
  </div>
  <div class="col-3">
    3 of 3
  </div>
</div>