Question

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

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

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

Answer 1

设置宽度并使其显示块：

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

这是更新的fiddle！：）

Answer 2

以下是如何使用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; 
}

Answer 3

感谢Praveen Kumar + Lokase的所有帮助。这对我来说是最简单的答案：CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

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

我如何给这个表圆形边框，仍然保持我的配色方案？

3 个答案: