css テーブルについて

質問

よろしくお願いします。
2だけを300pxと100pxに2分割にできないでしょうか。
<div class="aa">
<table>
<tr>
<th>1</th>
<td>2</td>
</tr>
<tr>
<th>1</th>
<td>1</td>
</tr>
</table>
</div>

.aa table {
width: 500px;
height: 100px;
border: 1px #000000 solid;
border-collapse: collapse;
}
.aa th {
width: 100px;
border: 1px #000000 solid;
}
.aa td {
width: 400px;
border: 1px #000000 solid;
}

回答No.2

mikemike7 · ベストアンサー

>横に2分割では無理でしょうか。
ああ、横になんですね。

<div class="aa">
<table>
<tr>
<th>1</th>
<td class="td1">2_1</td>
<td class="td2">2_2</td>
</tr>
<tr>
<th>1</th>
<td colspan="2">1</td>
</tr>
</table>
</div>

.aa td.td1{
width:100px;
}
.aa td.td2{
width:300px;
}

でどうでしょう。

回答No.1

mikemike7

<div class="aa">
<table>
<tr>
<th rowspan="2">1</th>
<td class="td1">2_1</td>
</tr>
<tr>
<td class="td2">2_2</td>
</tr>
<tr>
<th>1</th>
<td>1</td>
</tr>
</table>
</div>

CSSの追加
.aa td.td1{
height:100px;
}
.aa td.td2{
height:300px;
}

で、どうでしょうか。

補足

今は下に2分割されますが2を300pxと100pxに横に2分割では無理でしょうか。