###■やりたいこと
テーブルの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/
なんででしょう?まぁこれは質問内容とは関係ありませんでしょうか。
回答2件
あなたの回答
tips
プレビュー