新手：在我的情况下如何有一个行背景？答案

【问题标题】：Newbie: How to have a row background in my case?新手：在我的情况下如何有一个行背景？
【发布时间】：2011-12-11 15:55:50
【问题描述】：

我有一个非常简单的表格：

<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> 然后包含 <td>s ，我这样做的原因是 我想要一个具有 border-radius 每行的css功能而不是每列的行背景（<td>）

（我知道如果我把<div> 放在<td> 里面，下面的css 就会生效，但这不是我想要的see here，它是基于列的边框半径背景，但是我需要基于行的背景。）

我的css：

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

但是以这种方式具有基于 row<tr> 的 border-radius css 功能是行不通的，如何摆脱它？ 你可以在jsfiddle here上运行我的代码

【问题讨论】：

a div 作为tr 的子级无效的html
@Sotiris，我同意你的观点，我这样做只是为了强调我想要实现的目标，即基于行的背景具有边框半径，而不是基于列的。跨度>
罗布是对的。这有帮助吗？ stackoverflow.com/questions/1407371/…

【解决方案1】：

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

【讨论】：

不，我试过了，它不起作用，我的意思是行的背景没有边框半径，这是我在这篇文章中最关心的特性。
我真的不明白为什么人们继续投票这个答案有用，这个答案不起作用，我在发布问题之前尝试过，看到这里jsfiddle.net/EWPVc/20，没有边界半径行背景
@Rob，你不能说边界半径不起作用，它起作用，例如，如果我把 div 放在里面，检查这里jsfiddle.net/EWPVc/25，如果你仔细阅读我的问题，你就会明白我想要达到的目的。
@Rob，你用的是 Opera 浏览器吗，因为边框半径的 css 不能只在 Opera 上工作，其他浏览器应该没问题。

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