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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

2回答

4352閲覧

大事件です!テーブルにblockをかけると列の幅がそろいません!(firefox)

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

0グッド

3クリップ

投稿2017/08/05 13:48

編集2017/08/06 03:46

###■やりたいこと
テーブルのheadとbodyの幅を調整したいです。
ただし!スクロールさせるためにdisplay:block;をかけた状態で、です。

###■大事件
ラジオボタン選択でテーブルをスクロール表示に切り替える機能があります。
ところが!こちらのリンク先をご覧ください。
https://jsfiddle.net/6rt01wo5/

そうなんです!
スクロールさせるためにはdisplay:block;をかけなければならず、しかしそうすると、なんと、headとbodyのwidthがそろってくれない事件が、大事件が発生するのです!(chromeは平気でIE&firefoxの場合にです。)

display:block;さえなければwidthはきちんと揃うのですが。それだとスクロールができない。。

いちおう上記リンク先のコードはこちらです。

HTML

1<div class="radiogaga"> 2<label><input type="radio" onclick="funcOne()" id="radio1" checked>ちょっと</label> 3<label><input type="radio" onclick="funcAll()" id="radio2">もっと</label> 4</div> 5 6<table id="Table" class="tablesorter"> 7<thead> 8<tr> 9 <th class="tabemono_th">食べ物</th> 10 <th class="nomimono_th">飲み物</th> 11 <th class="hututuka_th">不束者</th> 12</tr> 13</thead> 14 15<tbody id="Body"> 16 <tr class="boxes"> 17 <td class="tabemono">りんごとばななのハーモニー</td> 18 <td class="nomimono">ワイン</td> 19 <td class="hututuka">はなこ</td> 20 </tr> 21 <tr class="boxes"> 22 <td class="tabemono">りんごとばななのハーモニー</td> 23 <td class="nomimono">ワイン</td> 24 <td class="hututuka">はなこ</td> 25 </tr> 26 <tr class="boxes"> 27 <td class="tabemono">りんごとばななのハーモニー</td> 28 <td class="nomimono">ワイン</td> 29 <td class="hututuka">はなこ</td> 30 </tr> 31 <tr class="boxes"> 32 <td class="tabemono">りんごとばななのハーモニー</td> 33 <td class="nomimono">ワイン</td> 34 <td class="hututuka">はなこ</td> 35 </tr> 36</tbody> 37</table>

CSS

1table { 2 width: 100%; 3} 4thead, tbody { 5 display: block; 6} 7tbody { 8 overflow-y: scroll; 9} 10 11th { 12 border: 1px solid #888; 13 background: #ff6565; 14} 15td { 16 border: 1px solid #888; 17} 18 19thead th:nth-child(1), 20tbody td:nth-child(1) { 21 width: 70%; 22} 23thead th:nth-child(2), 24tbody td:nth-child(2) { 25 width: 15%; 26} 27thead th:nth-child(3), 28tbody td:nth-child(3) { 29 width: 15%; 30}

javascript

1<script> 2function funcOne() { 3 document.getElementById( "Body" ).style.height = '30px'; 4} 5function funcAll() { 6 document.getElementById( "Body" ).style.height = '100px'; 7} 8</script>

###■ダメなこと
%指定でなくpx指定ならばheadもbodyも揃います。けれど、それだと画面の解像度によってズレが生じてしまうので、やっぱり%指定でなければダメなのです(>_<)

###■不思議なこと
関係あるかわかりませんが、幅の指定部分を上記のようなnth-childでなく、下記のようなclass名にすると、headの中身が1行に収まったりします。

CSS

1.tabemono, .tabemono_th { 2 width: 70%; 3 4.nomimono, .nomimono_th { 5 width: 15%; 6} 7.hututuka, .hututuka_th { 8 width: 15%; 9}

この書き方↑だとこんな感じ↓で、「不束者」の部分が1行に収まるんです。https://jsfiddle.net/6rt01wo5/2/
なんででしょう?まぁこれは質問内容とは関係ありませんでしょうか。

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

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

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

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

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

Lhankor_Mhy

2017/08/06 00:17

ご提示のリンクを拝見しましたが、問題が再現しません。セルの幅はヘッダとボディで同じように見えました。
退会済みユーザー

退会済みユーザー

2017/08/06 03:44

失礼いたしました。firefoxだけの現象のようです。追記しておきます。
Lhankor_Mhy

2017/08/08 05:58

当方firefoxでしたが、問題が再現しません。
退会済みユーザー

退会済みユーザー

2017/08/08 08:46

そんなこともあるのですね!!難しいです。。今回はひとまず諦めて締め切りますね。お手数おかけしてすみませんでした。
guest

回答2

0

ベストアンサー

的外れかもしれませんが、以下のように行ってはいかがでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 table { 8 width: 100%; 9 } 10 11 thead, tbody { 12 display: block; 13 } 14 15 tbody { 16 overflow-y: scroll; 17 } 18 19 th { 20 border: 1px solid #888; 21 background: #ff6565; 22 } 23 24 td { 25 border: 1px solid #888; 26 } 27 28 thead th:nth-child(1), 29 tbody td:nth-child(1) { 30 width: 70%; 31 } 32 33 thead th:nth-child(2), 34 tbody td:nth-child(2) { 35 width: 15%; 36 } 37 38 thead th:nth-child(3), 39 tbody td:nth-child(3) { 40 width: 15%; 41 } 42 </style> 43</head> 44<body> 45<div class="radiogaga"> 46 <label> 47 <input type="radio" name="radiobutton" onclick="funcOne()" id="radio1" checked> 48 ちょっと 49 </label> 50 <label> 51 <input type="radio" name="radiobutton" onclick="funcAll()" id="radio2"> 52 もっと 53 </label> 54</div> 55 56<table id="Table" class="tablesorter"> 57 <thead> 58 <tr> 59 <th class="tabemono_th">食べ物</th> 60 <th class="nomimono_th">飲み物</th> 61 <th class="hututuka_th">不束者</th> 62 </tr> 63 </thead> 64 65 <tbody id="Body"> 66 <tr class="boxes"> 67 <td class="tabemono">りんごとばななのハーモニー</td> 68 <td class="nomimono">ワイン</td> 69 <td class="hututuka">はなこ</td> 70 </tr> 71 <tr class="boxes"> 72 <td class="tabemono">りんごとばななのハーモニー</td> 73 <td class="nomimono">ワイン</td> 74 <td class="hututuka">はなこ</td> 75 </tr> 76 <tr class="boxes"> 77 <td class="tabemono">りんごとばななのハーモニー</td> 78 <td class="nomimono">ワイン</td> 79 <td class="hututuka">はなこ</td> 80 </tr> 81 <tr class="boxes"> 82 <td class="tabemono">りんごとばななのハーモニー</td> 83 <td class="nomimono">ワイン</td> 84 <td class="hututuka">はなこ</td> 85 </tr> 86 </tbody> 87</table> 88<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 89<script> 90 function funcOne() { 91 document.getElementById("Body").style.height = '30px'; 92 } 93 94 function funcAll() { 95 document.getElementById("Body").style.height = '100px'; 96 } 97 98 $(function () { 99 var th_width = []; 100 101 $(window).on("resize", function () { 102 $("#Body > tr:first-of-type").children().each(function () { 103 th_width.push($(this).width()); 104 }); 105 106 $(".tabemono_th").css({width: th_width[0]}); 107 $(".nomimono_th").css({width: th_width[1]}); 108 $(".hututuka_th").css({width: th_width[2]}); 109 }).resize(); 110 }); 111</script> 112</body> 113</html>

投稿2017/08/06 16:41

s8_chu

総合スコア14731

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

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

退会済みユーザー

退会済みユーザー

2017/08/08 08:49

何か起きたかわかりませんが、できてますねこれは…、す、スゴイ… 今回はひとまず、ズレまくりのセルを、一つずつ、一つずつ、px指定して、さらにスマホには別の指定をして、、とひたすらやりまくって乗り越えました。 お手数おかけしてすみません。どうもありがとうございます!
guest

0

普通にやるなら、一度テーブルを描画させてそれぞれの列幅を測り
幅の狭い方に広い方の値を設定するという地道な処理が必要です

投稿2017/08/07 05:22

yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2017/08/08 08:47

その方法でなんとか、、乗り越えました。アドバイスどうもありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問