html - このテーブルに丸みを帯びた境界線を設定し、現在の配色を維持するにはどうすればよいですか?

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

これが更新されたフィドルです！:)

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 の border-radius プロパティと border-collapse:collapse は混在しません。border-radius を使用して角の丸い折りたたみテーブルを作成するにはどうすればよいですか?

このページへのリンク: http://vamin.net/examples/rounded_tables2.html (最後の例を見てください - cellspacing = 0)