如何从引导表响应中删除边框？答案

【问题标题】：How to remove border from a bootstrap table-responsive?如何从引导表响应中删除边框？
【发布时间】：2017-09-21 04:28:24
【问题描述】：

您好，我正在尝试从表格中删除边框。

这是我的代码：

<table class="table table-responsive" style="border:none"> 
     <tr>
        <th>First name</th>
        <th>Last name </th>
     </tr> 
     <tr>
        <td>Tima</td>
        <td>Zahra</td>
     </tr> 
     <tr>
        <td>Emily</td>
        <td>SMITH</td>
     </tr> 
</table>

但它不起作用。请帮我！我很抱歉我的英语不好，希望你能理解。

【问题讨论】：

标签： html twitter-bootstrap css html-table

【解决方案1】：

只需使用以下 css：

.table thead tr th, .table tbody tr td {
    border: none;
}

【讨论】：

【解决方案2】：

只需在 head 部分进行以下更改

<style>
  .borderless tr, .borderless td, .borderless th {
    border: none !important;
   }
</style>

这在正文部分发生了变化：

<table class="table table-responsive borderless"> 
             <tr> <th>First name</th><th>Last name </th></tr> 
             <tr> <td>Tima</td> <td>Zahra</td> </tr> 
             <tr><td>Emily</td> <td>SMITH</td> </tr> 
</table>

这将对您有所帮助。谢谢你:)

【讨论】：

【解决方案3】：

使用 table-borderless 引导类。请注意我下面的表格有斑马条纹，但那是因为我想要它们并且对表格边框没有影响。如果您也不想要条纹，只需删除 table-striped。

<table class="table table-striped table-borderless">
<thead>
<tr>
<th scope="col">Pos</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Adam</td>
</tr>
</tbody>
</table>

【讨论】：