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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3898閲覧

position:absolute設定時に子孫要素のwidth属性の値がキャンセルされます

koshiDra

総合スコア42

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/09/07 13:59

編集2016/09/07 14:15

お世話になります。

以下のようなtableでtheadタグにposition:absoluteを設定した場合、表示されるテーブルのthead部分の幅が500pxで表示されません。

F12で確認したところposition:absolute設定前はtrタグの幅がtheadと同じだったのに、設定後は小さくなっている(その幅を全て失っている)ように見えます。

position:absoluteの設定前後でthead配下のタグの幅が変化しない方法をご存知の方、ご教授お願いいたします。

HTML

1<table style="width:500px;height:400px;"> 2 <col style="width: 50%;"/> 3 <col style="width: 25%;"/> 4 <col style="width: 25%;"/> 5 <thead style="width:500px; position: absolute;"> 6 <tr> 7 <td>aa</td> 8 <td>bb</td> 9 <td>bb</td> 10 </tr> 11 </thead> 12 <tbody> 13 <tr> 14 <td>qq</td> 15 <td>mm</td> 16 <td>m1m</td> 17 </tr> 18 </tbody> 19</table>

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

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

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

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

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

kei344

2016/09/07 14:10

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
koshiDra

2016/09/07 14:16

ご指摘ありがとうございました。
guest

回答3

0

position: absolute は幅の継承をしないため、別途幅を指定する必要があります。また、table要素内で position: absolute が上手く効かないことがあるので、何か別の方法を使われてはいかがでしょうか。

【HTML/CSSヘッダー固定のスクロールテーブル - kagan’s blog】
http://kagan.hatenablog.com/entry/2014/08/08/071726

【Tableのヘッダ固定を行うCSS & JQuery | Web’Notes】
http://webnonotes.com/css/table-header/

投稿2016/09/07 15:05

kei344

総合スコア69357

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

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

koshiDra

2016/09/08 12:25

ご教授ありがとうございます。 ただ今回はチーム内で話し合った結果、jQueryプラグイン(dataTables)を使用することになりました。 色々とありがとうございました。
guest

0

自己解決

jQueryプラグイン(dataTables)を使用

投稿2016/09/08 12:26

koshiDra

総合スコア42

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

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

0

<table style="width:500px;height:400px;"> <col style="width: 50%;"/> <col style="width: 25%;"/> <col style="width: 25%;"/> <thead style="width:500px; position: inherit;"> ← absoluteから変更 <tr> <td>aa</td> <td>bb</td> <td>bb</td> </tr> </thead> <tbody> <tr> <td>qq</td> <td>mm</td> <td>m1m</td> </tr> </tbody> </table>

とすると
イメージ説明
このように綺麗に並ぶのですが、いかがでしょうか。

投稿2016/09/08 12:10

編集2016/09/08 12:12
sheephuman

総合スコア112

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

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

koshiDra

2016/09/08 12:25

ご教授ありがとうございます。 ただ今回はチーム内で話し合った結果、jQueryプラグイン(dataTables)を使用することになりました。 色々とありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問