1

私はこのようなテーブルを持っており、角の丸い各行にスタイルを適用したいと考えています。

<table>
  <tr>
    <td>Month</td>
    <td>Savings</td>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

そして、私はこのようにCSSを書きました。

td
{
border-radius:5px;
border:2px solid red;
}

複数の列があり、角を丸くして行を表示したいと考えています。これを単一のセルで試していると、達成できます。誰でも私を助けてください。

前もって感謝します、カーシック

実際にはこのような出力が必要ですが、行の各セル間にギャップがあります。セル間隔を使用しようとしましたが、取得できません。

td { border: solid 1px #000; }
tr td:first-child
{ 
  border-top-left-radius: 10px; 
  border-bottom-left-radius: 10px;
  border-right:none;
}
tr td:last-child 
{ 
border-top-right-radius: 10px; 
border-bottom-right-radius: 10px;
border-left:none;
}

/````````````````````\
\..................../
/````````````````````\
\..................../
/````````````````````\
\..................../

私の行は、このように実線で表示したいと考えています。

4

3 に答える 3

6

次のように書くことができます：

td:first-child{
    -moz-border-radius:10px 0 0 10px;
    -webkit-border-radius:10px 0 0 10px;
}
td:last-child{
    -moz-border-radius:0 10px 10px 0;
    -webkit-border-radius:0 10px 10px 0;
}
td{background:red;}

これをチェックしてくださいhttp://jsfiddle.net/RNWwu/1/

于 2012-04-11T05:27:02.580 に答える
1 
tr {
    border-radius:5px;
    border:2px solid red;
}

、 、 の1 文字dをr(tdにtr) に変更します。

編集: 申し訳ありませんが、tr に境界線を適用することはできません。代わりに、ここから借りたこの「ハック」を試してください:

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-left-radius: 10px; }
tr:last-child td:first-child { border-top-left-radius: 10px; }
tr:last-child td:last-child { border-top-left-radius: 10px; }
于 2012-04-11T05:15:56.440 に答える
0

このようなことを試すことができます...ただし、<div>代わりに使用する必要があります<table>

<style>

table
{
border-collapse:separate;
border-spacing:1px;
}

td
{
background-color:red;
}

td:first-child
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
border:2px solid red;
}

td:last-child
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
border:2px solid red;
}


</style>

<table>
  <tr>
    <td>Month</td>
    <td>Savings</td>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>
于 2012-04-11T05:26:38.600 に答える