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

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

ただいまの
回答率

90.86%

  • HTML

    7771questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 92

King_of_Flies

score 292

下記実装があります。

<table class="hoge">
    <tr>
        <td colspan="3">hoge1</td>
        <td colspan="5">huge1</td>
    </tr>
    <tr>
        <td colspan="3">hoge2</td>
        <td colspan="5">huge2</td>
    </tr>
    <tr>
        <td colspan="3">hoge3</td>
        <td colspan="5">huge3</td>
    </tr>
</table>

簡単なtableのレイアウトで
二列三行のテーブルが存在し、
それぞれ横幅が3:5の振り分けで
<table class="hoge">に設定されている
<tr>内のcolspanの合計値から、分割数を割りだし、(今回は3+5で8)
<table>のwidthを8等分したwidthの3倍が一列目、
5倍が2列目のwidthになると思います。
たとえば

.hoge {
    width:160px;
}


と指定が有ったら、
一列目のwidthは160pxの3/8なので、60px
二列目のwidthは100pxになるでしょう?(認識あっていますか?)

ただ今のHTMLの実装だとtdに対しすべてにcolspanを入力しなくてはならないので、
<tabel class="hoge">の直下に
<colgroup>など挿入し、
列をグループ化して、そのグループに対してcolspanの設定を付与したいのですが、
下記実装ではうまくいかないようです。

<table class="hoge">
    <colgroup span="1" colspan="3"><!-- 一列目の対応 -->

    </colgroup>
    <colgroup span="1" colspan="5"><!-- 二列目の対応 -->

    </colgroup>

    <tr>
        <td>hoge1</td>
        <td>huge1</td>
    </tr>
    <tr>
        <td>hoge2</td>
        <td>huge2</td>
    </tr>
    <tr>
        <td>hoge3</td>
        <td>huge3</td>
    </tr>
</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で分割した列にそれぞれどの割合で出すかという指定が必要になります。

単純に

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


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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

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

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/23 09:36

    こんなやり方ができるんですか。
    サイト確認しました。

    ありがとうございます。

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/22 14:25

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

    キャンセル

+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/23 09: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は
    変わってきますよね?

    キャンセル

  • 2018/05/23 11: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>

    キャンセル

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

  • ただいまの回答率 90.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    テーブルタグでの行結合について

    HTMLのtableタグを使って以下のような表はどのようにしたら作成可能でしょうか。 下図のように3行3列で1列目と3列目の1行目と2行目を結合。2列目は2行目と3行目を結合させた

  • 解決済

    JSでテーブルの縦計算をしたいのですが色々とわかりません。

    前提・実現したいこと ◆HTMLで家計簿を作る◆ JSでテーブルの縦計算をしたいです。 ・1ページ内に1月から12月分のテーブルを表示させてすべて入力可能 ・入力値マイナス

  • 解決済

    HTMLでテーブルを2カラム表示

    html, css を用いて、テーブルを左右に2カラム表示したと考えています。 イメージとしては、アプリケーションのサイドバーとメインウィンドウという感じです。 【現状】 画面

  • 解決済

    htmlのテーブルを横に並べたい

    前提・実現したいこと テーブルを横に並べたいのですが上手くいきません。 具体的にはこのような形にしたいです。 今はこんな感じです。 最初は番号と所属を同じテーブルで

  • 解決済

    PHPのライブラリTCPDFでテーブル表示が崩れてがうまく表示できない

    前提・実現したいこと PHPでPDF出力を行いたいため、tcpdfを用いてHTMLからPDFを出力しようとしたのですが、 テーブルの結合(colspan,rowspan)がうまく機

  • 解決済

    jQueryの要素指定について

    前提・実現したいこと jQueryでstyle="width"を持っている要素を指定したい(複数の属性があっても「width」があれば指定する)のですが、この記述だとstyle="

  • 解決済

    HTMLのtableについて

    Htmlのテーブルを画面にフルサイズで表示したいので 以下のコードを書きました。 これ先頭の<!doctype html>を削除すると正しく縦横画面フルで表示されますが <!doc

  • 解決済

    HTML 選択した行の部分的な色付け

    選択したらその行の一部に色を付けたいのですがどうやっても行全体に色がついてしまいます。 どのようにすればよいのでしょうか・・・。 右側の <td colspan="5"></t

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

  • HTML

    7771questions

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