引导程序表边界删除水平线 [英] bootstrap table-bordered remove horizontal line

问题描述

我想删除引导表格边界的水平线，并保持垂直线.

I would like to remove the bootstrap table-bordered horizontal line and keep the vertical line.

我尝试了许多解决方案并进行了许多研究，但仍然找不到解决方案.

I have tried many solutions and done many of the research but I still cannot find the solution.

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>Otto</td>
                        <td>@TwBootstrap</td>
                    </tr>
                    <tr>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

推荐答案

只需在您的css文件中添加以下css规则(从td删除边框，然后再次添加到右侧):

Just add these css rules in your css file (remove the border from the td and add again to the right side):

.table-bordered td {border: none !important; border-right: solid 1px #ccc !important;}

.table-bordered td {
  border: none !important;
  border-right: solid 1px #ccc !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>Otto</td>
            <td>@TwBootstrap</td>
          </tr>
          <tr>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

还有一个代码片段也可以从thead删除边框...

One more snippet to remove the border from thead also...

.table-bordered td,
.table-bordered th {
  border: none !important;
  border-right: solid 1px #ccc !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>Otto</td>
            <td>@TwBootstrap</td>
          </tr>
          <tr>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

这篇关于引导程序表边界删除水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！