如何在表格中每行的行和角半径之间留出空格？

Question

我想在上面的图片中设计一个页面。我需要在行之间给出空格并在每行中给出边框半径。我试过div标签。但我不想在div中我需要仅在html中的表标签。

Answer 1

小提琴

http://jsfiddle.net/Lgp3m1ms/3/

table {
    border-collapse:collapse;
}
td {
    border: none;
    text-align: center;
    padding: 5px 0px;
}

th{    
background:#000;
color:#fff;
padding:4px;
border:1px solid #fff;
}


td div {
    background-color: #ccc;
    border:1px solid #000;    
}


td:first-child div {
    border-radius: 5px 0px 0px 5px;
    border-right:1px solid #000;
}
td:last-child div {
    border-radius: 0px 5px 5px 0px;
}

Answer 2

为TR提供背景和填充，以便在行之间使用高度和框阴影

OR

仅在行的第一个TD和行的最后一个TD的边界周围给TD设置样式

table tr td:first {
//style
}

table tr td:last {
//style
}

Answer 3

您正尝试将不同的样式添加到行中td元素的first-child和last-child。所以，试试这个：

td:first-child div {
    border-radius: 5px 0px 0px 5px;
}
td:last-child div {
    border-radius: 0px 5px 5px 0px;
}

<强> Working Fiddle

Border-radius mdn link

注意：在您的情况下，直接在td元素上定义样式是错误的。所以，你应该在里面添加一个div。