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

（我知道如果我将<div>放在<td>内，以下 css 将生效，但不我想要的{{ 3}}，它是一个基于列的边界半径背景，但是我需要一个基于行的背景。）

我的 css ：

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

但它以这种方式不能以<tr>为基础的 border-radius css功能，如何摆脱它？ 您可以在see here

上运行我的代码

Answer 1

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

Answer 2

检查这可能是您想要的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 3

border-radius可以应用于表，但不适用于行。查看table：http://vamin.net/examples/rounded_tables.html

的border-radius演示

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

3 个答案: