Question

如何使用tr-border-bottom而不是td（td没有任何边框）？

我尝试了以下但是td border 0也覆盖了tr边界，只是thead和th得到了边框！

table.admin_datagrid tbody tr {
     border:1px solid red;
}

table.admin_datagrid td{
    border: 0;
}

Answer 1

你的意思是在行之间而不是在col之间？

table.admin_datagrid tbody tr {

}

table.admin_datagrid td{
    border-left: 0;
    border-right: 0;
    border-top:1px solid red;
    border-bottom:1px solid red;
}

Answer 2

问题不在于td边框会覆盖tr边框，问题是您尝试在tr上设置边框。相反，尝试在需要具有底部边框的行中的td元素上分配一个类：

HTML：

<table class="admin_datagrid">
    <tbody>
    <tr>
        <td class="border-bottom">
            Text1
        </td>
    </tr>
    <tr>
        <td>
            Text2
        </td>
    </tr>
    </tbody>
</table>

CSS：

table.admin_datagrid td.border-bottom {
     border-bottom: 1px solid red !important;
}

table.admin_datagrid td{
    border: 0;
}

JSFiddle：http://jsfiddle.net/J7b3M/

Answer 3

更改订单并添加display:block：

table.admin_datagrid td{
    border: 0;
}

table.admin_datagrid tr {
     display: block;
     border:1px solid red;
}

小提琴： http://jsfiddle.net/z5GZN/

Answer 4

将border-collapse:collapse添加到您的表格中：

<强> DEMO

table{
      border-collapse: collapse; 
}
table.admin_datagrid tbody tr {
     border: 1px solid red;
}

table.admin_datagrid td{
    border: 0;
}

如何有tr-border-bottom而不是td

4 个答案: