Question

我有一张这样的表：

我想拆分单元格，看起来就像这样。

我有一个奇怪的第n个孩子分离，我也想保持颜色与示例图片中的颜色一样。

我该怎么做？

编辑：

到目前为止我的css表：

table.sty {

    background: #000;
    border-collapse: separate;
    box-shadow: inset 0 1px 0 #000;


    margin: 0px;
    text-align: center;

    float: left;
    display: inline-box;
    width: 1%;
}   

table.sty th {

    border-left: 1px solid #555;
    border-right: 1px solid #777;
    border-top: 1px solid #555;
    border-bottom: 1px solid #333;
    box-shadow: inset 0 1px 0 #999;
    color: #000;

    padding: 1px 1px;
    position: relative;
    text-shadow: 0 1px 0 #000;  

}



table.sty td {
    border-right: 1px solid #000
    border-left: 1px solid #e8e8e8;
    border-top: 1px solid #616161;
    border-bottom: 1px solid #292929;
    padding: 6px 15px;
    position: relative;
    transition: all 300ms;
    background: #727272;    
    color: #292929;

}


table.sty tr {
    background: #292929;    
}



table.sty tr:nth-child(odd) > td:first-child 
              {
                    background:#292929;
                    border-color: #000;
                    color:  #45ADFD;
              }
table.sty tr:nth-child(even) > td:first-child 
              {
                    color: #FFB5F9;
                    border-color: #000;
                    background: #292929 ;
              }  






table.sty tr:first-child td:nth-child(odd) 
              {
                    background:#000;
                    border-color: #000;
                    color:  #45ADFD;
              }

table.sty tr:first-child td:nth-child(even) 
              {
                    color: #fff;
                    border-color: #000;

              } 








table.sty tbody:hover td {
    color: transparent;
    text-shadow: 0 0 3px /*#D9070B*/;
}

 table.sty tbody:hover tr:hover td {
    color: #C7C7C7;
    text-shadow: none;
 }

在HTML中我添加了分隔符列，如：

<table class="sty" >
<tbody>

<tr height="50">

<td><div style="width: 100px;"><center>
content
</center> </div></td>
<td style="background-color:  #292929 ; border-right: 1px solid #4C82C0; " > . </td>
<!--------------------------------------------------------------------->
<td><div style="width: 110px;"><center>
content
</center> </div></td>
<td style="background-color: #292929 ; border-right: 1px solid #4C82C0;  width=1 ;" > . </td>      
<!---------------------------------------------------------------------> 
<td><div style="width: 110px;"><center>
content
</center> </div></td>
<td style="background-color: #292929 ; border-right: 1px solid #4C82C0;  width=1 ;" > . </td>      
<!--------------------------------------------------------------------->   
</tr> 

 ...

</tbody>   
</table>

Answer 1

尝试使用colspan属性：

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Tax</th>
  </tr>
  <tr>
    <td>January</td>
    <td colspan="3">$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td colspan="3">$80</td>
  </tr>
  <tr>
    <td colspan="3">Sum: $180</td>
  </tr>
</table>

Answer 2

您可以使用第一个子选择器来定位tr之后的第一个td子项，如JSFiddle https://jsfiddle.net/dq3scsr8/

所示

HTML

<table>
  <tr>
    <th>This Will Be Bigger</th>
    <th>Smaller</th>
  </tr>
  <tr>
    <td>abc</td>
    <td>def</td>
  </tr>
  <tr>
    <td>ghi</td>
    <td>jkl</td>
  </tr>
</table>

CSS

table {
  border: solid black 1px;
}
td:first-child {
  width:500px;
}

在HTML / CSS中如何垂直拆分表格单元格（特殊版本）

2 个答案: