Question

我正在使用这样的表格，我希望将样式应用于具有圆角的每一行。

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

我有多列，我想在圆角显示行。当我为一个单元格尝试这个时，我能够实现。任何人都帮助我。

提前致谢， Karthick

实际上我想要这样的输出但是连续的每个单元格之间存在间隙。我尝试使用单元格间距，但我无法得到。

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

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

我的行想要以实线边框显示。

Answer 1

你可以这样写：

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/

Answer 2

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

将一个字母d更改为r（td至tr）。

编辑：抱歉，您无法将边框应用于tr。试试这个'hack'，借鉴here：

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

Answer 3

您可以尝试这样的事情......但是，您应该使用<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>

表格中每行的边界半径

3 个答案: