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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

Q&A

解決済

3回答

15386閲覧

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

Surofuture

総合スコア49

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/07/31 03:15

編集2020/07/31 03:36

●質問に至るまでの背景
現在、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でスタイルしていきます。
が、2つ目のtdの要素にwidthが効かないのです。(widthの指定はここではしていない)
次に、iframeにwidthを指定したら効きましたが、iframe内の要素(CGIで動いているものなど)がwidthが効かなくてレイアウトが崩れてしまいます。(widthの指定はここではしていない)

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

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

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

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

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

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

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

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

Lhankor_Mhy

2020/07/31 04:16

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

回答3

0

ベストアンサー

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

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

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

投稿2020/07/31 11:05

-millmill-

総合スコア674

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

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

0

下記のように各テーブル要素を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

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

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

0

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

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

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

投稿2020/07/31 03:19

編集2020/07/31 03:22
FrontEnd_Japan

総合スコア271

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

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

Surofuture

2020/07/31 03:33

ありがとうございます。質問を編集しました。 widthの指定ですが、既に試しております。
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
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問