如何使用HTML表格並使多個行只有一個<tr>？

Question

我需要以使它響應， 改變一個HTML <table>但我想只能用工作css

table{ 
 
    width:100px; 
 
    height:100px; 
 
    background:green; 
 
} 
 

 
.a{ 
 
    width:100% !important; 
 
    background-color:Red; 
 
    
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td class="a">AAA</td> 
 
     <td class="b">BBB</td> 
 
     <td class="c">CCC</td> 
 
    </tr> 
 
     
 
    </tbody> 
 
</table>

我想要什麼：

不改變HTML，我想要在屏幕寬度爲100％時使用AAA，在下面使用「BBB」+「CCC」（BBB：寬度爲50％，寬度爲「CCC」的AAA線下）

我試圖沒有成功，請幫助嗎？

Answer 1

您是否反對更改table的默認display: table;？

如果沒有，你可以這樣做

.a{ 
    width:100%; 
    background-color:Red; 
} 
.b, .c { width: 49%; display: inline-block } 


table, tbody, tr, td { display: block; } 

Fiddle

Answer 2

您可以使用float有幾分是否定首先使用表的點。

如果這不是表格數據（並且佈局表明它不是），那麼您確實應該尋找替代的HTML結構。

* { 
 
    box-sizing: border-box; 
 
} 
 
table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
td { 
 
    width: 110px; 
 
    float: left; 
 
    width: 50%; 
 
    border: 1px solid grey; 
 
} 
 
td.a { 
 
    width: 100%; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td class="a">AAA</td> 
 
     <td class="b">BBB</td> 
 
     <td class="c">CCC</td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>