Question

我正在尝试删除特定表格上的边框：

<table class="teacher">
    <tr>
        <td>row 1</td>
        <td>col 1</td>
        <td>col 2</td>
    </tr>
    <tr>
        <td>row 2</td>
        <td>col 1</td>
        <td>col 2</td>
    </tr>
</table>

你可以看到我的小提琴here

我认为bootstrap.css与我的site.css竞争，但我不确定如何摆脱边界？

这是我的老师（来自site.css）造型：

.teacher {
    text-align: left;
    padding: 0;
}

.teacher table {
        border: none !important;
        border-collapse:collapse !important;
}

.teacher .contentLabel {
    width: 45%;
}

.teacher input {
    width: 10px;
    padding: 0px;
}

.teacher textarea {
    width: 225px;
    padding: 0px;
}

我的包裹：

        bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/site.css",
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme.css",
            "~/Content/bootstrap-duallistbox.css",
            "~/Content/jquery.dataTables.css"));

我认为这是导致此问题的原因：

.table {
  width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}

Answer 1

在第94行中注释掉<td>的边框。

td {
    color: #000;
    /* border: 1px solid #7c7c7b; */
    padding: .3em 1em;
    text-align: left;
}

如果您对表使用<thead>和<th>元素，请记住其他CSS：

第103行：

th {
    color: #7c7c7b;
    font-weight: 700;
    font-size: large;
    text-align: center;
    /* border: 1px solid #7c7c7b; */
    padding: .3em 1em;
}

第112行：

th.th2 {
    color: #7c7c7b;
    font-weight: 300;
    font-size: large;
    text-align: center;
    /* border: 1px solid #7c7c7b; */
    padding: .3em 1em;
}

Answer 2

你提供的jsfiddle的CSS第90行就是

td {
    color: #000;
    border: 1px solid #7c7c7b;
    padding: .3em 1em;
    text-align: left;
}

这就是造成边界的原因..

因此规则适用于td元素，而不是table

使用

.teacher td{border:none;}

应该解决它..

http://jsfiddle.net/gaby/R6X2M/2/

演示

竞争CSS样式表

2 个答案: