我有点卡住了CSS的问题,而使用Bootstrap。我也使用Angular JS和Angular UI。引导(这可能是问题的一部分)。

我正在做一个以表格形式显示数据的网站。 有时,数据包含我必须在表中显示的对象。 我想把无界表放到普通表中,同时为无界表保留分隔线。

但似乎即使我明确地说不要在表格上显示边界,它也是被迫的:

HTML:

<table class='table borderless'>

CSS:

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

这里,我想要的只是内部边界。


当前回答

这个方法对我很管用。

<td style="border-top: none;">;

关键是你需要添加border-top到<td>

其他回答

使用npm或cdn链接安装引导程序

<table class="table table-borderless">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
  </tr>
  <tr>
  <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
 </tbody>
</table>

使用此链接获取参考

Bootstrap支持scss,他有一个特殊的变量。如果这是一种情况,那么你可以添加你的主要变量。scss文件

$table-border-width: 0;

更多信息请点击这里https://github.com/twbs/bootstrap/blob/6ffb0b48e455430f8a5359ed689ad64c1143fac2/scss/_variables.scss#L347-L380

使用Boostrap 4中的border类

<td class="border-0"></td>

or

<table class='table border-0'></table>

请确保在类输入结束时使用您想要执行的最后一个更改。

与其他相似,但更具体:

    table.borderless td,table.borderless th{
     border: none !important;
}

试试这个:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

注意:你之前所做的并没有工作,因为你的css代码的目标是你的.borderless表(可能不存在)中的一个表。