詳しい人求む！

<table>の<thead>をposition:fixed;にすると<td>の幅がリセットされる

締切済

質問者：いしい
質問日時：2016/05/12 18:43
回答数：6件

Webページをスクロールしたら<table>の<thead>が上部に固定されるようにしたのですが、
固定された後に下の<td>の横幅がリセットされてしまいました（添付画像参照）。
また、<tr>の幅も変わったようです。
できるだけシンプルな解決策を教えてください。

試したtest.htmlのソースは次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>てすと</title>
<link rel="stylesheet" href="test.css">
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
</head>
<body>
<h1>テスト</h1>
<table>
<thead>
<tr>
<th>thead</th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th>
<th></th><th></th><th></th><th></th>
<th></th>
</tr>
</thead>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td>
</tr>
<tr>
途中省略
</tr>
</table>

<style>

</style>
<script type="text/javascript">

</script>

</body>
</html>

test.cssは次の通りです。
@charset "UTF-8";

h1{height:100pt;}
table{table-layout:fixed;width:1240pt;}
th,td{border:solid 5px black;text-align:center;height:100pt;}
th{background-color:red;}
tr:nth-child(2n+1){background-color:blue;}
tr:nth-child(2n+0){background-color:white;}
th:nth-child(1),td:nth-child(1){width:300pt;}
th:nth-child(2),td:nth-child(2){width:70pt;}
th:nth-child(3),td:nth-child(3){width:250pt;}
th:nth-child(n+4),td:nth-child(n+4){width:62pt;}

よろしくお願いします。

<colgroup>を使うことで<td>の幅については改善できました。
しかし、<th>の幅が変わってしまうことは改善できません。
その件については、別に質問しました。

「<table>の<thead>をposition:fixed;にすると<th>の幅が変わってしまう。」
https://oshiete.goo.ne.jp/qa/9274501.html

こちらでは<colgroup>を使う方法以外での改善策を引き続き求めます。

補足日時：2016/05/13 17:49
通報する
Javascript（と、その結果による thead{position:fixed;} ）を使わず、
CSSだけで<thead>を固定する方法で、
添付画像の状態までは持って行けました。
微妙にずれている（添付画像は縮小されてるので分かりにくい）のですが、
本番ではborderで<th>や<td>を区切らずに間隔を0にするので、
見た目ではほとんど分からないようにできそうです。
まだ、cssのどの部分が重要で、どの部分が無駄かが分かってませんが、
何とかなりそうです。
ありがとうございました。

補足日時：2016/05/14 12:29
通報する
書き忘れましたが、もちろん、
不要な<style>から</script>までをtest.htmlから削除しました。

No.6の回答に寄せられた補足コメントです。補足日時：2016/05/14 20:11
通報する

通報する

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

質問の本文を隠す

回答 (6件)

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

No.6

回答者： ORUKA1951
回答日時：2016/05/14 19:30

`とりあえず、私の示したスタイルシートの該当部分

要素セレクタ[title="対数表"]を変更する。
あなたのtableのtitleをつける。

この二つがセット

ついで、<thead>内の<td>は<th>に変更
任意で、<thead></thead>を<tfoot></tfoot>にしたものを<tbody>の前に置く

それだけで済むはず

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございました。
私のtest.htmlとtest.cssを微修正することで実現できました。
test.htmlに<tbody>を追加し、test.cssに約２行追加して実現できました。
気付くのが遅くなりましたが、おかげさまで、
thead{position:fixed;}のJavascriptを使わず、
CSSだけで実現できることを知り、
そちらの方が確実で便利であることも知りました。
ありがとうございました。

通報する

お礼日時：2016/05/14 20:06

No.5

回答者： ORUKA1951
回答日時：2016/05/14 12:56

隙間は、

連続する空白類の入力があった場合は1つにまとめてしまう必要がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　によるものです。
だから、font-size:0;
としている。その後td,th内でサイズを改めて指定している。
　基本があやふやですね。・・・

とりあえずはサンプルをそのまま使ってごらんなさい。そして、一つ一つのプロパティについて仕様書( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )で確認していく。
　またセレクタや軽傷というカスケーディングの仕組みが理解されていないようですが、

table[title="対数表"] * tr{} の詳細度は、0,0,1,2 ですけど・・・

カスケーディングはCSS(カスケーディングスタイルシート)の肝で、プロパティよりはるかに重要で、仕様書でもプロパティより前に書いてある。

5 セレクタ
6 プロパティ値とカスケーディング、継承の割り当て

( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

とにかく、一度仕様書を通して読んでから、始めたほうが効率的ですよ。

- 0
- 件

通報する

この回答へのお礼

font-size:0;はそのような意味があったのですね。
教えてくださり、ありがとうございました。

通報する

お礼日時：2016/05/14 13:32

No.4

回答者： ORUKA1951
回答日時：2016/05/14 12:38

＞最初から作り直す必要があるのかなと思っています。

　最初から作り直す方法
★すでにHTMLの表(table)がある場合
　firefoxのアドオン、Dafizilla Table2Clipboard( https://addons.mozilla.org/ja/firefox/addon/dafi … )を使って表をコピーすると、クリップボードにcsvデータが保存されます。
★エクセルデータの場合
　名前を付けて保存でcsvとして保存します。

EmEditor( https://jp.emeditor.com/ --1か月試用できる )などの高機能テキストエディタで、置換をする。
tbodyの範囲を選択して、「選択部分を置換」にチェックをして
[正規表現]を有効にして、置換を繰り返す。
(半角スペース)二個　→ 半角スペース１個
　をなくなるまで繰り返す。

\n → </td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td>

,　→　</td><td>

thead部分は、上記<td></td>をthに置換する。

前後を修正して
<table title="任意のわかりやすいもの">
　<thead>
　　・・
　</thead>
　<tfoot>
　　・・
　</tfoot>
　<tbody>
　　・・
　</tbody>
でくくる

文法チェックがすんだら、先のスタイルシートの
table[title="対数表"]　をそれに合わせる。

それだけ・・
セルの幅などは自身に合わせて調整・・・よく読めばむつかしくはないはず・・

私はサンプルの対数表常用対数 - Wikipedia( https://ja.wikipedia.org/wiki/%E5%B8%B8%E7%94%A8 … )をfirefoxのtable2clipboardでコピーして、５分もかかっていない。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
どうやら微修正で済みそうです。

通報する

お礼日時：2016/05/14 13:27

No.3

回答者： ORUKA1951
回答日時：2016/05/14 11:40

＞display:inline-block; を使う方法ですか…。

　それ以前にfixedを使うのはだめですよ。fixedは表示領域に対しての位置決めで、しかも他の要素から完全に独立する。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
fixed
　ボックスの位置は'絶対'モデルに従って計算されるが、それに加えて、ボックスはある参照に対して固定される。'絶対'モデルの場合と同じように、ボックスのマージンは他のマージンと相殺しない。handheld、projection、screen、tty、tvメディアタイプの場合、ボックスはビューポートに対して固定され、スクロール時に移動しない。printメディアタイプの場合、ボックスは各ページごとにレンダリングされ、たとえページがビューポートを通して見られる場合でもページボックスに対して固定される（たとえば、印刷プレビューの場合）。他のメディアタイプの場合、見栄えは未定義である。著者はメディアごとに'fixed'を指定したい場合もあるだろう。たとえば、著者が画面上のビューポートの上辺に対してボックスを固定したいが、印刷ページでは固定したくない場合である。2つの仕様は@media規則を用いて分離されてもよい：
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Visual formatting model( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )］より
　HTMLのtableの仕様部分も読んでおきましょう。

　基礎--仕様書---を読んでから、理解して始めないと・・・・。「あちこちの藁の山から針を探す」--説明サイトをつまみ食いしても時間と労力が無駄!!!
　数学や理科の勉強と同じ、公式を覚えたり練習問題をいくらやっても成績上がらない。基礎から積み上げていくと、こんな簡単なものないのにね。

　サンプルを試されると・・たぶん期待通り。
　それでいて、ソースは極めてシンプルで文法チェックも簡単に通ってしまう。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
Javascriptを使わずに<thead>を固定する方法について、
Webで検索するなどして勉強しているのですが、
私のソースのどこをどのように変えたら良いのか試行錯誤中で、
なかなか理解できず、
最初から作り直す必要があるのかなと思っています。

通報する

お礼日時：2016/05/14 11:57

No.2

回答者： ORUKA1951
回答日時：2016/05/14 10:24

tableは、ご存知の通り二次元データをユーザーエージェントに関わらず伝達する手段ですから、データとしては、HTML/tableでよいのですが、デザインには制約が多くて利用できません。

またIEはtableの処理がweb標準でないために、それを合わせるのに苦労する。

　ということで、そもそもtableのままでデザインするには無理があることはお気づきだと(^^)

それさえ気づけば意外と簡単・・サンプルです。
★タブは＿に置換してあるので戻してください。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　で検証済みのHTML5+CSS3です。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<table title="対数表">
＿＿＿<thead>
＿＿＿＿<tr>
＿＿＿＿＿<th>数</th><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
＿＿＿＿</tr>
＿＿＿</thead>
＿＿＿<tfoot>
＿＿＿＿<tr>
＿＿＿＿＿<th>数</th><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
＿＿＿＿</tr>
＿＿＿</tfoot>
＿＿＿<tbody>
＿＿＿＿<tr>
＿＿＿＿＿<td>1.0</td><td>.0000</td><td>.0043</td><td>.0086</td><td>.0128</td><td>.0170</td><td>.0212</td><td>.0253</td><td>.0294</td><td>.0334</td><td>.0374</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>1.1</td><td>.0414</td><td>.0453</td><td>.0492</td><td>.0531</td><td>.0569</td><td>.0607</td><td>.0645</td><td>.0682</td><td>.0719</td><td>.0755</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>1.2</td><td>.0792</td><td>.0828</td><td>.0864</td><td>.0899</td><td>.0934</td><td>.0969</td><td>.1004</td><td>.1038</td><td>.1072</td><td>.1106</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>1.3</td><td>.1139</td><td>.1173</td><td>.1206</td><td>.1239</td><td>.1271</td><td>.1303</td><td>.1335</td><td>.1367</td><td>.1399</td><td>.1430</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>1.4</td><td>.1461</td><td>.1492</td><td>.1523</td><td>.1553</td><td>.1584</td><td>.1614</td><td>.1644</td><td>.1673</td><td>.1703</td><td>.1732</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>1.5</td><td>.1761</td><td>.1790</td><td>.1818</td><td>.1847</td><td>.1875</td><td>.1903</td><td>.1931</td><td>.1959</td><td>.1987</td><td>.2014</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>1.6</td><td>.2041</td><td>.2068</td><td>.2095</td><td>.2122</td><td>.2148</td><td>.2175</td><td>.2201</td><td>.2227</td><td>.2253</td><td>.2279</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>・</td><td>・</td><td>・</td><td>・</td><td>・</td><td>・</td><td>・</td><td>・</td><td>・</td><td>・</td><td>・</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>9.7</td><td>.9868</td><td>.9872</td><td>.9877</td><td>.9881</td><td>.9886</td><td>.9890</td><td>.9894</td><td>.9899</td><td>.9903</td><td>.9908</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>9.8</td><td>.9912</td><td>.9917</td><td>.9921</td><td>.9926</td><td>.9930</td><td>.9934</td><td>.9939</td><td>.9943</td><td>.9948</td><td>.9952</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>9.9</td><td>.9956</td><td>.9961</td><td>.9965</td><td>.9969</td><td>.9974</td><td>.9978</td><td>.9983</td><td>.9987</td><td>.9991</td><td>.9996</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿</section>
＿<footer>
＿＿<h2>A nice footer</h2>
＿</footer>
</body>
</html>

★表組みの項目部分を固定することができるjQueryプラグイン「jQuery.FixedTable」 | BlackFlag( http://black-flag.net/jquery/20110303-2729.html )
　を使う方法もあるのですが、javascriptはそれを停止しているユーザーが多い現状から極力使わないほうが良いでしょう。

- 0
- 件

通報する

この回答へのお礼

引き続き回答ありがとうございます。
display:inline-block; を使う方法ですか…。
使ったことがないので使いこなすのに時間がかかりそうですが、
ちょっと考えてみます。
ありがとうございました。

通報する

お礼日時：2016/05/14 11:13

No.1

回答者： ORUKA1951
回答日時：2016/05/14 08:46

thead/tfootは、表のヘッダ/フッタを明示するためで、それに伴い長大な表の印刷時に印刷時に各ページに項目行を印刷するためのものです。

　スタイルシートでサイズをptで指定されているようですから、印刷用スタイルシートでしょうが、だとすると、fixedなど何もしなくても、各ページの上下にthead/tfootは各ページに固定されます。
<table>
<caption>常用対数表</caption>
<thead>
<tr>
<th>数</th><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
</tr>
</thead>
<tfoot>
<tr>
<th>数</th><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.0</td><td>.0000</td><td>.0043</td><td>.0086</td><td>.0128</td><td>.0170</td><td>.0212</td><td>.0253</td><td>.0294</td><td>.0334</td><td>.0374</td>
</tr>
<tr>
<td>1.1</td><td>.0414</td><td>.0453</td><td>.0492</td><td>.0531</td><td>.0569</td><td>.0607</td><td>.0645</td><td>.0682</td><td>.0719</td><td>.0755</td>
</tr>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
印刷のためではなく、縦に異常に長い表をスクロールした時に、
各列が何を表しているか分からなくなるので分かるようにするためです。
また、別の<table><th>を作って、スクロールしたら表示するようにもできますが、
<th>の項目をクリックして並び替えをするJavascriptを利用してまして、
「ablesorterで HTMLの表をソート(並び替え)可能にする」
http://allabout.co.jp/gm/gc/434260/
その機能を維持するために、同じ<table>内の<th>を見えるようにしておく必要があります。

通報する

お礼日時：2016/05/14 09:07

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！