html - 如何使用 HTML 表格并使多行只有一个 ？

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 的 AAA 行下:50% 宽度，以及“CCC”也在宽度)

我正在尝试但没有成功，有什么帮助吗？

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