HTMLテーブルを操作して1つだけの複数の行を作成する方法<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の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

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>