質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

10487閲覧

html colspanでtable内のtd要素にwidthを割合指定する方法を教えて下さい。

King_of_Flies

総合スコア382

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/05/22 04:58

編集2018/05/22 05:01

下記実装があります。

html

1<table class="hoge"> 2 <tr> 3 <td colspan="3">hoge1</td> 4 <td colspan="5">huge1</td> 5 </tr> 6 <tr> 7 <td colspan="3">hoge2</td> 8 <td colspan="5">huge2</td> 9 </tr> 10 <tr> 11 <td colspan="3">hoge3</td> 12 <td colspan="5">huge3</td> 13 </tr> 14</table>

簡単なtableのレイアウトで
二列三行のテーブルが存在し、
それぞれ横幅が3:5の振り分けで

<table class="hoge">に設定されている <tr>内のcolspanの合計値から、分割数を割りだし、(今回は3+5で8) <table>のwidthを8等分したwidthの3倍が一列目、 5倍が2列目のwidthになると思います。 たとえば ```css .hoge { width:160px; } ``` と指定が有ったら、 一列目のwidthは160pxの3/8なので、60px 二列目のwidthは100pxになるでしょう?(認識あっていますか?)

ただ今のHTMLの実装だとtdに対しすべてにcolspanを入力しなくてはならないので、
<tabel class="hoge">の直下に

<colgroup>など挿入し、 列をグループ化して、そのグループに対してcolspanの設定を付与したいのですが、 下記実装ではうまくいかないようです。

html

1<table class="hoge"> 2 <colgroup span="1" colspan="3"><!-- 一列目の対応 --> 3 4 </colgroup> 5 <colgroup span="1" colspan="5"><!-- 二列目の対応 --> 6 7 </colgroup> 8 9 <tr> 10 <td>hoge1</td> 11 <td>huge1</td> 12 </tr> 13 <tr> 14 <td>hoge2</td> 15 <td>huge2</td> 16 </tr> 17 <tr> 18 <td>hoge3</td> 19 <td>huge3</td> 20 </tr> 21</table>

colgroupの要素のspanは

http://www.newcredge.com/IT/www/html/tag/table/table-colgroup.html

グループ化する列の数を指定する。

らしいですど、
ここでいうspanは一番最初のhtml内で指定しているのcolspanとは別で、
テーブルの列のことを指していますよね?
なので<colgroup span="1">は一列目に対して適応、
次いで<colgroup span="1">を記載した場合、2列目に適応されるのだと思います。

ただ、これだと1:1の割合のテーブルなので、
80pxのwidthを持つtdが二列できて終わりですので、
別途colgroupで分割した列にそれぞれどの割合で出すかという指定が必要になります。

単純に

html

1<colgroup span="1" style="width:60px;"><!-- 一列目の対応 --></colgroup> 2<colgroup span="1" style="width:100px;"><!-- 二列目の対応 --></colgroup>

でも出来るかもしれませんが、

<table class="hoge">のwidthが変更された場合自動で変わらないですし、 styleのWidthを%で指定する方法も考えましたが、 3/8が2.3333という無限小数なので、23% 77%とか切り捨てた指定はしたくありません。

かといって
colgropuに対しての何らかの処理を施し、
最初に記載したHTMLのレイアウトの形にもできずに困っています。

わかるかたいらっしゃいますか。
お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

colgroupについては一旦なしで回答します。

セル側に幅の指定をしてあげないと、中身のテキストとかで自動調整され、思い通りにいかないことが多いです。
割合指定する場合は、calcで計算するのがいいかなと思います。

css

1 .hoge td { 2 width: calc(100% / 8); 3 border: 1px solid #000; 4 } 5 .hoge td[colspan="3"] { 6 width: calc(100% / 8 * 3); 7 } 8 .hoge td[colspan="5"] { 9 width: calc(100% / 8 * 5); 10 } 11

下記を一旦確認していただくといいかもしれません。
https://codepen.io/sleepzzz/pen/NMJgJB

投稿2018/05/22 05:40

kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

King_of_Flies

2018/05/23 00:36

こんなやり方ができるんですか。 サイト確認しました。 ありがとうございます。
guest

0

それぞれ横幅が3:5の振り分けで

<table class="hoge">に設定されている <tr>内のcolspanの合計値から、分割数を割りだし、(今回は3+5で8) <table>のwidthを8等分したwidthの3倍が一列目、 5倍が2列目のwidthになると思います。

なりません。colspanは幅の比率をあらわしているのではなく、水平方向のセルの結合数(セルがまたがる列数)を指定しています。

【colspan属性 ≪ td要素 ≪ 表(テーブル) ≪ 要素 ≪ HTML5入門】
http://html5.cyberlab.info/elements/table/td-colspan.html

td要素のcolspan属性は、表(テーブル)における、水平方向のセルの結合数(セルがまたがる列数)を指定する属性。

投稿2018/05/22 16:33

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

King_of_Flies

2018/05/23 00:35

セルがまたがる列数というのは理解しています。 そのセル一つ当たりのwidthは設定しない限り 固定のwidthを持たないですから、 結果的に親階層で指定されているwidthから セル一つ当たりのwidthを割り出しているのではないでしょうか? <table style="width:150px;"> <tr> <td colspan="1">hoge</td> <td colspan="2">huge</td> </tr> <table> と <table style="width:100px;"> <tr> <td colspan="1">hoge</td> <td colspan="2">huge</td> </tr> </table> は同じcolspanの結合数でありますが、一つ当たりのセルのwidthは 変わってきますよね?
kei344

2018/05/23 02:03

結合しないcolspanを使う意味は有りませんよ。 下記はCSSで幅指定をしない限り同じ幅で表示されます。 <table style="width:100px;"> <tr> <td colspan="1">hoge</td> <td colspan="2">huge</td> </tr> </table> <table style="width:100px;"> <tr> <td colspan="10">hoge</td> <td colspan="2">huge</td> </tr> </table> </table> <table style="width:100px;"> <tr> <td>hoge</td> <td>huge</td> </tr> </table>
guest

0

3/8が2.3333という無限小数なので、23% 77%とか切り捨てた指定はしたくありません。

37.5%と62.5%では?
小数点適当なところまでいれられるのであとは誤差と考えればいいのでは?

投稿2018/05/22 05:15

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

King_of_Flies

2018/05/22 05:25

%については計算ミスでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問