table要素のtdにwidthが効かない

●質問に至るまでの背景
現在、html,cssカスタマイズの案件を受けております。先方のHPはtable要素が多用しており
、古くて使いにくいと言われているtable要素をスタイルしなきゃいけないことになりました。

●コード

HTML
1<table cellspacing="0" cellpadding="0" summary="会社のロゴ・名称">
2
3<script language=javascript>
4// <!--
5function show(inputData) {
6var objID=document.getElementById( "layer_" + inputData );
7var buttonID=document.getElementById( "category_" + inputData );
8if(objID.className=='close') {
9objID.style.display='block';
10objID.className='open';
11}else{
12objID.style.display='none';
13objID.className='close';
14}
15}
16//-->
17</script><a href="javascript:void(0)" id="category_" onclick="show('');"></a>
18
19
20	<tr>
21		<td><a href="/"><img id="logo" src="/images/common/logo.jpg"></a></td>
22		<td>
23			<Div Align="right">
24				<iframe id="counter" name="" width="255" height="72" src="#" scrolling="no" frameborder="0" style="padding:0;width:255px;"></iframe>
25			<Div>
26		</td>
27    </tr>
28    
29
30</table>

この部分をcssでスタイルしていきます。
が、２つ目のtdの要素にwidthが効かないのです。（widthの指定はここではしていない）
次に、iframeにwidthを指定したら効きましたが、iframe内の要素（CGIで動いているものなど）がwidthが効かなくてレイアウトが崩れてしまいます。（widthの指定はここではしていない）

●試したこと
・table要素にtable-layout:fixed;を入れた

●質問
・2つ目のtd要素の横幅（width）が反映されるにはどうしたらいいのでしょうか？
・iframe内のcgiなどの要素にもwidthを反映させるにはどうしたら良いでしょうか？

●補足
iframeにwidthが効かないというより、iframe内の中身の要素にはwidthが効かない感じです。

Lhankor_Mhy

2020/07/31 04:16

>iframe内の中身の要素にはwidthが効かないそれはどうしようもないと思います。

行動規範の内容に同意します

回答3件

ベストアンサー

このコードのままで、レイアウトを何とかする、
という事であれば Jon_do さんの書かれたように
inline-block にして
tr にdisplay: flex; をかけてしまうとかが
一番簡単な解決法だとは思いますが、、、

上のコメントにも書きましたが
閉じタグのない<Div> とか、廃止済の summary="" とか
ツッコミどころ満載で ><

tableで悩まれるより
サクッとタグを書き換えた方が早い気がしますm(__)m

投稿2020/07/31 11:05

-millmill-

総合スコア674

下記のように各テーブル要素をinline-blockにしてデザインするという方法もあります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<title>
5    test
6</title>
7<style>
8    * {
9        margin: 0;
10        padding: 0;
11    }
12
13    body {
14        width: 100vw;
15        height: 1000px;
16    }
17
18    table {
19        position: relative;
20    }
21
22    thead,
23    tr,
24    th,
25    tbody,
26    td {
27        display: inline-block;
28        font-size: 0;
29        box-sizing: border-box;
30    }
31
32    table {
33        width: 400px;
34        font-size: 0;
35        box-sizing: border-box;
36        display: block;
37    }
38
39    .tr00 {
40        background-color: rgb(2, 233, 110);
41        width: 400px;
42
43    }
44
45    .tr01 {
46        background-color: rgba(226, 241, 20, 0.287);
47        width: 400px;
48
49    }
50
51    .tr02 {
52        background-color: rgba(54, 200, 219, 0.287);
53        width: 400px;
54    }
55
56    th,
57    td {
58        font-size: 24px;
59    }
60
61    th {
62        width: calc(100% / 4);
63    }
64
65    th:not(:first-child) {
66        border-left: 2px solid black;
67    }
68
69    .tr00 {
70        border: 2px solid black;
71    }
72
73    .tr01 {
74        border-left: 2px solid black;
75        border-right: 2px solid black;
76        border-bottom: 2px solid black;
77    }
78
79    .tr02 {
80        border-left: 2px solid black;
81        border-right: 2px solid black;
82        border-bottom: 2px solid black;
83    }
84
85    td {
86        width: calc(100% / 4);
87        text-align: center;
88    }
89
90    td:not(:first-child) {
91        border-left: 2px solid black;
92    }
93
94    thead {
95        position: relative;
96    }
97</style>
98
99<body>
100    <div>
101        <table id="table">
102            <thead id="thead">
103                <tr class="tr00">
104                    <th>E</th>
105                    <th>A</th>
106                    <th>B</th>
107                    <th>C</th>
108                </tr>
109            </thead>
110            <tbody>
111                <tr id="tr" class="tr01">
112                    <td>あいう</td>
113                    <td>あいう</td>
114                    <td>かきく</td>
115                    <td>さしす</td>
116            </tbody>
117            <tbody>
118                <tr class="tr02">
119                    <td>あいう</td>
120                    <td>あいう</td>
121                    <td>かきく</td>
122                    <td>さしす</td>
123                </tr>
124            </tbody>
125        </table>
126     </div>
127</body>
128
129</html>
130

投稿2020/07/31 03:44

Jon_do

総合スコア1373

まず、tableの入れ子にdivを含めることはできません。
https://webliker.info/46840/#toc_12

そして、tdのwidth指定の記載がありませんが・・・。

<td style="width: XXpx;">で指定できますが、試しているでしょうか？

投稿2020/07/31 03:19

編集2020/07/31 03:22

FrontEnd_Japan

総合スコア271

Surofuture

2020/07/31 03:33

ありがとうございます。質問を編集しました。 widthの指定ですが、既に試しております。

-millmill-

2020/07/31 10:52 編集

脇から済みません^^;; <td> の子要素として <div> を入れる事は認められています。フローコンテンツ https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories ただ、<Div>頭が大文字、閉じタグ無しはマズイと思います _ _#

FrontEnd_Japan

2020/07/31 10:50

-millmill-様 tableの入れ子としてはdivは駄目だと思います。 tdはOKです。

-millmill-

2020/07/31 10:56 編集

そうですね^^ table 直下の子としてはダメですがご質問のコードは td の子になっていますよね divが、というより script もどうなんでしょ? という気がします^^;;

FrontEnd_Japan

2020/07/31 10:56

-millmill-様あら質問当初はdivもtable直下に有った記憶があるので、その様にコメントをしたのですが。途中でコードが修正されてしまったのですかね。ご指摘ありがとございました。

FrontEnd_Japan

2020/07/31 10:59

-millmill-様質問内容の編集履歴を確認したところ、編集前はtableの入れ子にdivがありましたね。 https://teratail.com/questions/history-questions/281568 別に良いですが、最初の質問から時間が経過しているので編集履歴とか確認してからコメントしていただけると助かります。私も間違えて回答してしまったと思ってしまいますので。

-millmill-

2020/07/31 11:06

そうでしたか。。。ごめんなさいm(__)m 今後は注意するように致しますねm(__)m

行動規範の内容に同意します

あなたの回答