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

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

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

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

Q&A

解決済

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

King_of_Flies
King_of_Flies

総合スコア381

HTML

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

3回答

0グッド

0クリップ

5402閲覧

投稿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のレイアウトの形にもできずに困っています。

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答3

3

ベストアンサー

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

総合スコア3402

kei344, yambejp, King_of_Flies👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

King_of_Flies

2018/05/23 00:36

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

1

それぞれ横幅が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

総合スコア69031

kszk311👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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>

1

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

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

投稿2018/05/22 05:15

yambejp

総合スコア109079

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

King_of_Flies

2018/05/22 05:25

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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