0

以下のようなコードでtd1とtd2の両方にdisplay:blockを適用すると、td1の下にtd2が配置されてしまいます。
td1の右横にtd2を配置したいのですがどうしたらよいですか?
現状では、画像の黒色の配置になっていますが、td2を赤色のところに配置したいです。

<table>
<tr>
<td class = "td1">aaaa</td>
<td class = "td1">aaaa</td>
<td class = "td2">bbbb</td>
<td class = "td2">bbbb</td>
</tr>
</table>
td.td1{display:block;}
td.td2{display:block;}

画像の説明をここに入力

2
  • td1の右横にtd2を配置したい、とありますが、現状では各要素の具体的な配置が不明なため、どのように配置したいのかをもう少し詳しく、図示するなどして教えていただけませんか?
    – supa
    Commented 2020年9月22日 11:50
  • 図を追加しました。図の赤色のところへtd2を配置したいです。
    – denden
    Commented 2020年9月22日 12:15

1 件の回答 1

0

.td1, .td2 クラスが付与された要素の内容によっては tr 要素で分けますが、現状の HTML 構造であれば、 CSS Grid Layout の grid-template-rows プロパティを用いて次のように実現出来ます。

tr {
  display: grid;
  grid-template-rows: 50% 50%;
  grid-auto-flow: column;
}
<table>
  <tr>
    <td class="td1">aaa1</td>
    <td class="td1">aaa2</td>

    <td class="td2">bbb1</td>
    <td class="td2">bbb2</td>
  </tr>
</table>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。