时间戳

首页 > 解决方案 > bootstrap-border top 正在为表格添加边框

html - bootstrap-border top 正在为表格添加边框

问题描述

我创建了一个如下表：

在此处输入图像描述

如您所见，尽管我在以下代码中添加了边框顶部，但没有进行任何更改：

 <div class="col-6 col-md-3 col-sm-6 font-style" style="font-size:10px;">

        <table class="table  table-outer-border  font-style " >

       <tbody class="font-style">

         <tr > 
           <td>Receiver:</td>

         </tr>
         <tr> 
           <td>Attention To:</td>

         </tr>
         <tr> 
           <td>Contact No:</td>

         </tr>

       </tbody>
        </table>

    </div>

    <div class="col-6 col-md-3 col-sm-6 font-style" style="font-size:10px;">

      <table class="table table-outer-border  font-style " >

     <tbody class="font-style">

       <tr > 
         <td>Deliver To:</td>

       </tr>
       <tr> 
         <td>Attention To:</td>

       </tr>
       <tr> 
         <td>Contact No:</td>

       </tr>

     </tbody>
      </table>

      </div>

风格：

.table-outer-border  {
    border-left:  black solid;
    border-right: black solid;
    border-top: black solid ;
    border-bottom: black solid;
    border-width: thin;
}

为什么它不起作用，还有没有办法删除行之间的线条？

标签： htmlcsstwitter-bootstrap

解决方案

您需要在代码中进行一些更改，我刚刚为您做了这些更改，请验证并告诉我。

#MainDiv {
  height: 100px;
  width: 500px;
  margin: 5px;
  display: flex;
  flex-direction: row;
  font-size: 20px;
}

td {
  width: 150px;
}

#firstDiv {
  border: 1px solid black;
}

#secondDiv {
  margin-left: 20px;
  border: 1px solid black;
}
<div id="MainDiv">


  <div id="firstDiv" class="col-6 col-md-3 col-sm-6 font-style">

    <table class="table  table-outer-border  font-style ">

      <tbody>

        <tr>
          <td>Receiver:</td>
          <td></td>
        </tr>
        <tr>
          <td>Attention To:</td>
          <td></td>

        </tr>
        <tr>
          <td>Contact No:</td>
          <td></td>
        </tr>

      </tbody>
    </table>

  </div>

  <div id="secondDiv" class="col-6 col-md-3 col-sm-6 font-style">

    <table class="table table-outer-border  font-style ">

      <tbody class="font-style">

        <tr>
          <td>Deliver To:</td>
          <td></td>
        </tr>
        <tr>
          <td>Attention To:</td>
          <td></td>
        </tr>
        <tr>
          <td>Contact No:</td>
          <td></td>
        </tr>

      </tbody>
    </table>

  </div>
</div>

推荐阅读