70607
以下のようなコードで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;}
    
```

[![画像の説明をここに入力](https://i.stack.imgur.com/dTp9A.png)](https://i.stack.imgur.com/dTp9A.png)
CC BY-SA 4.0
2020-09-22T10:34:30.723
70602
2020-09-22T13:09:38.960
2020-09-22T13:09:38.960
32986
10088
question
css
display:block;同士横並びにしたい
`.td1`, `.td2` クラスが付与された要素の内容によっては `tr` 要素で分けますが、現状の HTML 構造であれば、 CSS Grid
Layout の [`grid-template-rows`
プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/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>
```
CC BY-SA 4.0
2020-09-22T13:09:09.610
70607
2020-09-22T13:09:09.610
32986
70602
answer