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

将一个字母 , 更改d为r( tdto tr)。

编辑：抱歉，您不能将边框应用于 tr。试试这个'hack'，从这里借来的：

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 回答