HTMLの表に関する質問です。ド素人のためお手柔らかにお願いします。表の一つのセルの中で2列で表

締切済

質問者：くまのみみみ
質問日時：2022/11/24 01:46
回答数：2件

HTMLの表に関する質問です。

ド素人のためお手柔らかにお願いします。

表の一つのセルの中で2列で表示することは出来ますか？
一つのセルに入る文字列が長すぎるので2列にしたいです。
出来れば、間に縦棒とか入れたいのですが、可能なのでしょうか？

軽く調べましたが分からなかったので、、

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： Ogre7077
回答日時：2022/11/24 11:13

最近ならば CSS による段組みレイアウトが使えます

https://developer.mozilla.org/ja/docs/Web/CSS/co …

例)
<td><div style="column-count:2">
長すぎるので2列にしたい文字列
</div></td>

そんなに最近でもない対象にも配慮したいならば
flexbox を応用した段組みを検討しましょう
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
https://www.google.com/search?q=flexbox+%E6%AE%B …

- 0
- 件

通報する

No.1

回答者： gura_
回答日時：2022/11/24 09:36

くまのみみみ様

･････一つのセルの中で2列で表示することは･･････

周りのセルを連結すれば良い。

ご参考に↓
https://www.tohoho-web.com/html/table.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>テーブルテスト</title>
<style>
.table {
border-collapse: collapse;
width: 300px;
}
.table td {
border: 1px solid gray;
}
</style>
</head>
<body>
<h4>2行2列(実は2行2,3列)の位置だけを2列にする</h4>
<table class="table" border=1>
<tr><td>1行-1</td><td colspan=2>1行-23</td><td>1行-4</td></tr>
<tr><td>2行-1</td><td>2行-2</td><td>2行-3</td><td>2行-4</td></tr>
<tr><td>4行-1</td><td colspan=2>4行-23</td><td>4行-4</td></tr>
</table>
</body>
</html>