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

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

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

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

CSS

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

Q&A

解決済

1回答

609閲覧

2回目のthの横幅をCSSで固定する

kusaka00

総合スコア55

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/10/20 10:23

宜しくお願い致します。

■問題点

2行目にあるthは2つあるのですが、2行目の2つ目のthだけが固定値にならない。
(下記ソースの「テスト項目3」の部分です)

■やりたい事

全部で3つあるthをcssで全て固定幅にしたい。

■やった事

・thに直接width="170"
・thに直書きでwidth:170px;

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テストページ</title> <style> .shipment_data { width: 100%; table-layout:fixed; margin: 20px 0; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .shipment_data th { background: #f3f3f3; width: 170px; } .shipment_data th { padding: 9px 10px 8px; box-sizing: border-box; border-top: 1px solid #ccc; border-left: 1px solid #ccc; text-align: left; vertical-align: top; word-break: break-all; } .shipment_data td { padding: 9px 10px 8px; box-sizing: border-box; border-top: 1px solid #ccc; border-left: 1px solid #ccc; text-align: left; vertical-align: top; word-break: break-all; } </style> </head> <body> <table class="shipment_data"> <tr> <th>テスト項目1</th> <td colspan="3">テストテストテストテストテストテストテストテストテストテストテストテスト</td> </tr> <tr> <th>テスト項目2</th> <td>テストテストテストテストテスト</td> <th>テスト項目3</th> <td>テストテストテストテスト</td> </tr> </table> </body> </html>

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

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

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

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

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

firegrape

2020/10/20 11:44

ソースを表示してみました。 2行目の2つ目のthだけが固定値にならない。 とありますが、 もう少し具体的に言うとどういうことでしょうか? どういう感じにしたいという風に書いてもらえると 助かります。
kusaka00

2020/10/20 21:51

ご連絡ありがとうございます。 thにたいしてcssで横幅170pxを指定しているのですが、ウィンドウサイズの横幅を狭めたときに1行目と2行目の1つ目のthはcssで指定した170pxのままなのですが、2行目2つ目のthだけ横幅が変わってしまいます。 thに対してcssで横幅170pxの指定がしてあるので、ウィンドウサイズの横幅を狭めたときに3つのthが横幅170pxになるとおもっているのですが、なぜか2行目2つ目のthだけウィンドウサイズの横幅を狭めたときに170px以下の幅になってしまいます。 この3つ目のthも横幅を狭めたときに170pxになっていてほしいです。 宜しくお願いいたします。
guest

回答1

0

ベストアンサー

テーブルのカラムの幅は1行目に設定する必要があります。
ところがcolspanでまとめてしまっているので、その中のカラム幅を設定することはできません。

そのような場合は、col要素でカラムの定義をします。

<col> - HTML: HyperText Markup Language | MDN

html

1<table class="shipment_data"> 2 <colgroup> 3 <col class="colth"> 4 <col> 5 <col class="colth"> 6 <col> 7 </colgroup> 8 <tr> 9 <th>テスト項目1</th> 10 <td colspan="3">テストテストテストテストテストテストテストテストテストテストテストテスト</td> 11 </tr> 12 <tr> 13 <th>テスト項目2</th> 14 <td>テストテストテストテストテスト</td> 15 <th>テスト項目3</th> 16 <td>テストテストテストテスト</td> 17 </tr> 18</table>

css

1.shipment_data .colth { 2 background: #f3f3f3; 3 width: 170px; 4}

投稿2020/10/20 12:14

hatena19

総合スコア33620

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

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

kusaka00

2020/10/21 00:59

colgroupとcolを使用したらイメージ通りの挙動になりました。 詳しい説明ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問