新手:在我的情况下，怎样才能有排的背景呢？

Question

我有张很简单的桌子：

<table border="1" class="my-table">
  <tr class="head">
       <th>head-1</th>
       <th>head-2</th>
       <th>head-3</th>
       <th>head-4</th>
       <th>head-5</th>    
  </tr>
  <tr>
      <div class="row-data">
           <td>data-1</td>
           <td>data-2</td>
           <td>data-3</td>
           <td>data-4</td>
           <td>data-5</td>
      </div>
  </tr>
 </table>

正如您在上面看到的，第二行 <tr>包含一个<div>，该<div>随后包含<td>，原因是我这样做的原因是，希望为每一行(E 210而不是每列(<td>)提供 border-radius css特性的行背景。

(我知道如果我将<div>放在<td>中，下面的css将生效，但这是而不是，请看这里，它是一个基于列的边界半径背景，但是我需要一个基于行的背景。)

我的css

.row-data{
    background-color:#ececec;
    border-radius:10px;
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
}

但是，如果有一个基于行border-radius css的<tr>特性，就不能以这种方式工作，如何摆脱它呢？您可以在小提琴手上运行我的代码。

Answer 1

检查这可能是你想要的http://jsfiddle.net/sandeep/EWPVc/24/

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

Answer 2

而不是为它创建一个新的div，只需将类添加到行：<tr class="row-data">

Answer 3

边框半径可以应用在表上，但不能应用行。查看以下表格的边框半径演示：tables.html