1

我不想在这样做时使用表格，但我不知道该怎么做。基本上，我想要一张白色和灰色交替行的表格。表格需要有一个圆形边框，并且各个行之间应该有边框（但没有列边框）。

这是我到目前为止所得到的：http: //jsfiddle.net/zVDyh/1/

即使我设置了边框半径，它似乎根本不会影响表格的边框。

4

3 回答 3

2

设置宽度并使其块显示：

.my_table {
    border: 1px solid $grey;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: block;
    width: 90%;
}

这是更新的小提琴！:)

于 2012-07-05T16:49:10.843 回答
0

以下是使用 DIV 的方法：

http://jsfiddle.net/RRd2e/

<div class="con">
    <div class="row">
        <div class="col">c1</div>
        <div class="col">c2</div>
        <div class="col">c3</div>
    </div>
    <div class="row">
        <div class="col">c1</div>
        <div class="col">c2</div>
        <div class="col">c3</div>
    </div>
    <div class="row">
        <div class="col">c1</div>
        <div class="col">c2</div>
        <div class="col">c3</div>
    </div>
    <div class="row">
        <div class="col">c1</div>
        <div class="col">c2</div>
        <div class="col">c3</div>
    </div>
    <div class="row">
        <div class="col">c1</div>
        <div class="col">c2</div>
        <div class="col">c3</div>
    </div>
</div>

.con {
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.row { 
    height: 38px; 
    border-bottom:1px solid #ccc; 
}
.row:nth-child(even) {
     background:#e3e3e3;
}
.row:last-child {
    border-bottom:none;
}
.col { 
    width:50px; 
    line-height:38px; 
    display:inline; 
}
于 2012-07-05T17:01:03.373 回答
0

感谢 Praveen Kumar + Lokase 的所有帮助。这是我最容易遵循的答案：CSS3 的border-radius 属性和border-collapse:collapse 不能混用。如何使用border-radius创建一个圆角折叠表？

它链接到此页面： http: //vamin.net/examples/rounded_tables2.html（查看最后一个示例 - cellspacing = 0）

于 2012-07-05T19:34:01.617 回答