アプリ版：「スタンプのみでお礼する」機能のリリースについて

詳しい人求む！

<td>が空欄でもtable{table-layout:fixed;}で<td>の幅が狭くなった。

締切済

  • 質問者：いしい
  • 質問日時：
  • 回答数：2件

<table>の<th><td>の幅がセルの内容によって変わらないように
table{table-layout:fixed;}を使っていたのですが、
別の問題を解決するために調べていたところ、
セルの中に何もない状態でも、
table{table-layout:fixed;}の有無で<th><td>の幅が異なるようです。
添付画像のように、table{table-layout:fixed;}を消したら幅が狭くなりました。
このように幅が異なるのはどのような理由からでしょうか？
また、table{table-layout:fixed;}なしで
table{table-layout:fixed;}がある場合と同じ幅にするには、どうしたら良いでしょうか？

試したtest2.htmは次の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>てすと</title>
<link rel="stylesheet" href="test2.css">
</head>
<body>
<h1>テスト（table{table-layout:fixed;}あり）</h1>
<table>
<colgroup>
<col span="1" class="left1">
<col span="1" class="left2">
<col span="1" class="left3">
<col span="10" class="left4">
</colgroup>
<thead>
<tr>
<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></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>
</table>
</body>
</html>

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

h1{height:50px;}
table{table-layout:fixed;}
table,tr{width:1300px;}
th,td{border:solid 5px black;text-align:center;height:100px;}
th{background-color:red;}
tr:nth-child(2n+1){background-color:blue;}
tr:nth-child(2n+0){background-color:white;}
.left1{width:330px;}
.left2{width:70px;}
.left3{width:250px;}
.left4{width:65px;}

よろしくお願いします。

「<td>が空欄でもtable{table」の質問画像

質問者からの補足コメント

  • うれしい

    test2.cssの
    table{table-layout:fixed;}を
    table{table-layout:fixed;border-collapse:collapse;}にして、
    th,td{border:solid 5px black;text-align:center;height:100px;}を
    th,td{border:solid 0px black;text-align:center;height:100px;}にしたら、
    table-layout:fixed; の有無で<th><td>の幅が同じになりました。

      補足日時：2016/05/14 09:14
    通報する
通報する

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

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： ORUKA1951
  • 回答日時：

ちなみに、以前


テーブルをスクロールさせるときのスクロールの位置 - HTML 解決済 | 教えて！goo( https://oshiete.goo.ne.jp/qa/7105490.html )
　でも挑戦したのですが・・・

<table>の<thead>をposition:fixed;にすると<td>の幅がリセットされる - Webデザイン・CSS | 教えて！goo( https://oshiete.goo.ne.jp/qa/9273531.html )
　のほうが良いですね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2016/05/14 11:57

No.1

  • 回答者： ORUKA1951
  • 回答日時：

<table>の<thead>をposition:fixed;にすると<td>の幅がリセットされる - Webデザイン・CSS | 教えて！goo(

https://oshiete.goo.ne.jp/qa/9273531.html )
のように、スタイルシート側ではtableを使わないのが常道です。
　特にIEが面倒になるのでね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
昔からtableのスタイルには悩まされていたので、使わないで済むならそれが良いのですが…。

通報する
お礼日時：2016/05/14 10:58

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報