html - 使用 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 小提琴演示

Answer 2

http://jsfiddle.net/pjLFY/

你几乎做对了。

您需要td在 last中将边框设置为 none tr，但您只需将该行的边框设置为 none。

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

您可以像这样使用with而不是覆盖noneor ：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。