Bootstrap 删除twitter引导中的行

liwlm1x9  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(7)|浏览(178)

我在使用twitter bootstrap来做一些我不得不做的web应用(我不是web开发人员),我找不到一种方法来禁用表格的行线。
正如您在Bootstrap文档中所看到的,默认表格样式包含行。
此致,

rqenqsqc

rqenqsqc1#

将此添加到您的主CSS:

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

对于较新版本的 Bootstrap ,请使用此选项:

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

yftpprvb2#

在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; 
}
uxhixvfz

uxhixvfz3#

如果只使用.table td,bootstrap.min.css比您自己的样式表更具体。因此,请改用以下代码:

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

v9tzhpje4#

这就是我的工作。

.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; 
}

我得把重要的东西拿出来才能坚持下去。

bjp0bcyl

bjp0bcyl5#

从朋友那里得到了同样的问题。我的建议是不需要!Important的,看起来像这样:我添加了一个定制类“no-border“,它可以添加到引导表中。

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

你可以看到我在一个solution here

hgb9j2n6

hgb9j2n66#

相反,如果您在向面板添加行时遇到问题,请不要忘记将添加到TABLE中。默认情况下(http://getbootstrap.com/components/#panels),它应该添加行,但它帮助我添加了标记,因此现在显示了行行。
下面的示例“probably”不会显示行间的线:

<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>
rkkpypqq

rkkpypqq7#

如果您只有一两个表要删除行,则可以快速修复:应用“style=“上边框:无;”到表内的每一个和/或标签。
表头:

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

表格数据:

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

相关问题