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最後に'のいずれにも境界線を設定する必要はありませんが、その行trの境界線をnoneに設定するだけです。

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

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

Answer 3

を使用したくない場合:last-childで、ページの背景色がわかっている場合は、これを追加してみてください。

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

Answer 4

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を参照してください。

Answer 5

これを試して：

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