删除 Bootstrap 中的行

我正在为一些我不得不做的 web 应用程序使用 Bootstrap (我不是一个 web 开发人员) ，我找不到一种方法来禁用表格的行行。

从 Bootstrap 文档中可以看到，默认的表样式包含行行。

问候,

109723 次浏览
小开
最佳答案

把这个添加到你的主 CSS 中:

table td {
border-top: none !important;
}

对于更新版本的 bootstrap，请使用此方法:

.table th, .table td {
border-top: none !important;
}
小开

在 Bootstrap 3中，我添加了一个表无边框类

.table-no-border>thead>tr>th,
.table-no-border>tbody>tr>th,
.table-no-border>tfoot>tr>th,
.table-no-border>thead>tr>td,
.table-no-border>tbody>tr>td,
.table-no-border>tfoot>tr>td {
border-top: none;
}
小开

如果只使用. table td，则 bootstrap.min.css 比您自己的样式表更具体:

.table>tbody>tr>th, .table>tbody>tr>td {
border-top: none;
}
小开

反过来，如果您有问题添加到您的面板行不要忘记添加到您的表。 默认情况下(http://getbootstrap.com/components/#panels) ，它应该添加行，但是它帮助我添加了标记，因此现在显示了行行。

下面的示例“可能”不会显示行之间的行:

<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
<tr><td> Hi 1! </td></tr>
<tr><td> Hi 2! </td></tr>
</table>
</div>

下面的示例将显示行之间的行:

<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
<thead></thead>
<tr><td> Hi 1! </td></tr>
<tr><td> Hi 2! </td></tr>
</table>
</div>
小开

这就是我的工作. 。

.table-no-border>thead>tr>th,
.table-no-border>tbody>tr>th,
.table-no-border>tfoot>tr>th,
.table-no-border>thead>tr>td,
.table-no-border>tbody>tr>td,
.table-no-border>tfoot>tr>td,
.table-no-border>tbody,
.table-no-border>thead,
.table-no-border>tfoot{
border-top: none !important;
border-bottom: none !important;
}

为了让它更牢固，我不得不拿出那些重要的东西。

小开

朋友也问了同样的问题。我的不需要 !Important的建议是这样的: 我添加一个自定义类“ no-border”，它可以添加到引导表中。

.table.no-border tr td, .table.no-border tr th {
border-width: 0;
}

你可以看到我在 解决方案上的表现

小开

如果只有一两个表要删除这些行，那么可以快速修复: 对每个表都应用“ style = “ orders-top: none;” 表中的 < th > 和/或 < td > 标记。
表头:

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

表格数据:

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

提交答案