tableのようなレイアウトの中にデータを入れて表示させたいと考えています。 _ _ _ _ _ _ _ _ _ title1 _ _ _ _ _ _ title2 _ _ _ _ _ _ title3 _ _ _ _ _ _ _ _ _ _ _ _ data1-1 data1-2 data1-3 data1-4 data1-5 _ _ _ _ _ _ data2-1 data2-2 _ _ _ _ _ _ data3-1 data3-2 data3-3 _ _ _ このようなtableを flexで表示させたいと考えています。 div { margin : 0px 5px 5px 0px ; } --> dataの横並びは「display: flex;」でできるかと思いますが titleを含めた場合どうすればcssのflexで表現できますか？

JosephWaldenさん >････cssのflexで表現･･････････ご参考に↓ div { margin: -1px 0px 0px 0px; background:#eee; flex:1; border:1px solid #333; border-left:none; } --> title1 title2 title3 data1-1 data1-2 data1-3 data1-4 data1-5 data2-1 data2-2 data3-1 data3-2 data3-3 title1 title2 title3 data1-1 data1-2 data1-3 data1-4 data1-5 data2-1 data2-2 data3-1 data3-2 data3-3

詳しい人求む！

cssのflexのレイアウトについて

解決済

質問者：JosephWalden
質問日時：2019/09/19 18:25
回答数：1件

tableのようなレイアウトの中にデータを入れて表示させたいと考えています。

<style type="text/css">

</style>

<table>
_ _ _ <tr>
_ _ _ _ _ _ <td_ colspan="5">title1</td>
_ _ _ _ _ _ <td_ colspan="2">title2</td>
_ _ _ _ _ _ <td_ colspan="3">title3</td>
_ _ _ </tr>
_ _ _ <tr>
_ _ _ _ _ _ <td>data1-1</td><td>data1-2</td><td>data1-3</td><td>data1-4</td><td>data1-5</td>
_ _ _ _ _ _ <td>data2-1</td><td>data2-2</td>
_ _ _ _ _ _ <td>data3-1</td><td>data3-2</td><td>data3-3</td>
_ _ _ </tr>
</table>

このようなtableを
flexで
表示させたいと考えています。

<style type="text/css">

</style>

dataの横並びは「display: flex;」でできるかと思いますが
titleを含めた場合
どうすればcssのflexで表現できますか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： gura_
回答日時：2019/09/20 01:13

JosephWaldenさん

>････cssのflexで表現･･････････

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">

</style>
</head>
<body>

<table>
<tr>
<td colspan="5">title1</td>
<td colspan="2">title2</td>
<td colspan="3">title3</td>
</tr>
<tr>
<td>data1-1</td><td>data1-2</td><td>data1-3</td><td>data1-4</td><td>data1-5</td>
<td>data2-1</td><td>data2-2</td>
<td>data3-1</td><td>data3-2</td><td>data3-3</td>
</tr>
</table>

<div style="margin-top: 5px;">
<div class="box-flex">
<div style="flex:5;">title1</div>
<div style="flex:2;">title2</div>
<div style="flex:3;">title3</div>
</div>
<div class="box-flex">
<div>data1-1</div><div>data1-2</div><div>data1-3</div><div>data1-4</div><div>data1-5</div>
<div>data2-1</div><div>data2-2</div>
<div>data3-1</div><div>data3-2</div><div>data3-3</div>
</div>
</div>
</body>
</html>