在HTML/CSS如何垂直拆分表格單元格（特別版）

，我想分裂細胞因此它看起來就像這樣。

我有一個奇偶第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>

來源

2017-10-11 AmlesLausiv

請發表[MCVE]你的問題 – j08691

我添加了我現在擁有的代碼 – AmlesLausiv

一些附註：'center' [depricated]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center）以及樣式屬性，數字「寬度」值需要一個單位。 –

嘗試跨度屬性：

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

來源

2017-10-11 23:37:40 Skykaza

您可以使用第一子選擇器爲目標的首個TD孩子TR後，從的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; 
}

來源

2017-10-11 23:45:13 hurtbox

在HTML/CSS如何垂直拆分表格單元格（特別版）

回答

相關問題