使用CSS设置表格样式

Question

我有一个像这样的HTML表

<table>
    <tr>
        <td>Content</td>                    
        <td>Content</td>                    
        <td>Content</td>                                        
    </tr>   
    <tr>
        <td>Content</td>                    
        <td>Content</td>                    
        <td>Content</td>                                        
    </tr>   
    <tr>
        <td>Content</td>                    
        <td>Content</td>                    
        <td>Content</td>                                        
    </tr>
</table>

现在我需要设计这样的样式......

我尝试使用这样的CSS：

table td {
    padding: 20px 20px;
    width: 33%;
    vertical-align: top;
    border-bottom: 1px dashed #b4b4b4;
    border-right: 1px dashed #b4b4b4;
}

但是无法得到我期待的结果。我不能在这个问题上使用内联样式。

希望有人能帮助我。

谢谢。

Answer 1

你可以使用:last-child来实现它 尝试使用它。

table td:last-child
{
    border-right:none;
}
table tr:last-child td
{
    border-bottom:none;
}

JS Fiddle Demo

Answer 2

http://jsfiddle.net/pjLFY/

你几乎做对了。

您需要在最后td内将边框设置为tr个，但您只需将行的边框设置为无。

table tr:last-child td {
     border-bottom: none; 
}

table td:last-child {
     border-right: none; 
}

Answer 3

试试这个：

table td {
    padding: 20px 20px;
    width: 33%;
    border-bottom: 1px dashed #b4b4b4;
    border-right: 1px dashed #b4b4b4;
    background: #FFFDDC;
}
table td:last-child {
    border-right: 0;
}
table tr:last-child td {
    border-bottom: 0;
}

Answer 4

如果您不想使用:last-child，并且您知道该页面的背景颜色，请尝试添加以下内容：

table {
    border-collapse: collapse;
    border: 1px solid white;
}

Answer 5

您可以将none与0一起使用，而不是覆盖:last-child或:not：

table td {
    padding: 20px 20px;
    width: 33%;
    vertical-align: top;
}
table tr:not(:last-child) td {
    border-bottom: 1px dashed #b4b4b4;  
}
table td:not(:last-child) {
    border-right: 1px dashed #b4b4b4;    
}

请参阅jsFiddle。