Question

我需要一张相关数据表。但是，有些列已分组。设计师提出了一个无法改变的设计。一个例子是：

每组列都需要按图像显示进行样式设置。数据都是动态的，因此一些表可能有2个列组，如上所述，有些可能有6个。因为数据是相关的，所以它应该在表中。但是我认为在使用1个表时没有可能的方式来使其具有上述效果。继承了jsfiddle的尝试。

<div>    
    <table cellspacing="0" >
            <colgroup span="3" >
            </colgroup>    

            <colgroup span="2" >
            </colgroup>  
        <thead>
            <th>
                col 1
            </th>    

            <th>
                col 2
            </th>  

            <th>
                col 3
            </th>   

            <th>
                col 4
            </th>      

            <th>
                col 5
            </th>      
        </thead>  

        <tbody>
               <tr>
                   <td>item</td>
                   <td>item</td>
                   <td>item</td>
                   <td>item</td>
                   <td>item</td>
               </tr>    
        </tbody>    

    </table>    
</div>

和css：

 div{
      background-color: grey;
      display:inline-block;
      padding: 50px;
  }

  table{
      background-color: transparent;
      cellspacing: 0;
      border-collapse:collapse;
  }

  colgroup {
      background-color:white;
      border-right: 25px solid grey;
      border-radius: 5px;
      box-shadow: 0 0 6px rgba(0,0,0,.2);
  }

如您所见，border-radius和box-shadow不起作用。

表示此类数据的最佳方式是什么？可以在1张桌子里做吗？或者我需要做多个表吗？或者我可以使用大量的divs（正如之前的开发人员所做的那样）？

样式表列组

0 个答案: