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

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

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

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

HTML5

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

HTML

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

CSS

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

Q&A

解決済

1回答

715閲覧

一部のテーブルの幅の長さが反映されない。

ghtew2

総合スコア245

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/07/26 08:01

実現したいこと
付属画像のテーブルの一番左の四角いマスの幅の長さを調節したいのですが、上手くいきません。
「募集は終了しました」と書いてある、その下の2つ目のテーブルの一番左の幅を上にある1つ目のテーブルの一番左側のテーブルの幅と同じにしたいのですが、上手くいきません。
イメージ説明

試してみたこと
2つともテーブルコードは全く同じにして、cssにwidth: 10px; を追加したら、1つ目のテーブルの幅が変わり、改善されたのですが、何故か2つ目のテーブルの左の幅が長いままで、改善されません。

原因はなんでしょうか?
回答よろしくお願いいたします。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 6 <title></title> 7 8 9 10 <link rel="stylesheet" href="reset.css"> 11 12 <link rel="stylesheet" href="companyhp5.css"> 13 14 15 <style type="text/css"> 16 /* レスポンシブ対応で右に出る謎の余白を無くす */ 17 .wrapper { 18 overflow: hidden; 19 } 20</style> 21</head> 22<body> 23<!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応--> 24<div class="wrapper"> 25 26 27 28 29<table class="kaisha"> 30 <tr> 31 <th>職種:</th> 32 <td> 33 システムエンジニア(経験者)テレワーク社員 34 </td> 35 </tr> 36 <tr> 37 <th>雇用形態</th> 38 <td> 39 正社員 40 </td> 41 </tr> 42 43 <tr> 44 <th>対象となる方</th> 45 <td>C#,HTML,PHP,CSS,java,swift,の内どれか3つ以上の言語でのシステム開発実務経験5年以上の方<br> 46 年齢・学歴・資格等:不問 47 </td> 48 </tr> 49 50 <tr> 51 <th>勤務地</th> 52 <td>【リモート案件多数】<br> 53 ※:東京都本社 テレワーク勤務<br> 54 東京本社テレワーク勤務の者との連携勤務になります。 55 56 </td> 57 </tr> 58 59 <tr> 60 <th>給与</th> 61 <td>決算給与</td> 62 </tr> 63 64 <tr> 65 <th>職務内容</th> 66 <td>ホームページ作成、SEO対策・開発、ネットビジネス開発、アプリ開発、デザイン開発<br> 67 遠隔操作によるサポート、プログラミング代行、顧客サポート<br> 68 その他におけるIT関連業務。 69 </td> 70 </tr> 71 72 <tr> 73 <th>休日</th> 74 <td>土日祝日 年間休日120日<br> 75 顧客対応によって土日も出勤の場合も多数あります。<br> 76 在宅勤務が殆どです。 77 </td> 78 </tr> 79 80 <tr> 81 <th>平均残業時間</th> 82 <td>30時間</td> 83 </tr> 84 85 <tr> 86 <th>勤務時間</th> 87 88 <td>変形労働制<br> 89 ◆9:00~18:00(実働8時間)  90 休憩時間70分  91 午前7分 お昼休み54分 午後7分<br> 92 ◆13:00~22:00(実働8時間) 93 休憩時間70分  94 午後10分 夕食時60分<br> 95 96 ★プロジェクトによりシフト勤務あり<br> 97 在宅勤務が殆どです。<br> 98 ※参画案件によってテレワーク、時差勤務ができない場合があります 99 </td> 100 </tr> 101 102 <tr> 103 <th> 求める人材</th> 104 <td>・常に新しいものを求め、それを的確に提案できる者。<br> 105 ・在宅勤務が多いため、コツコツ仕事ができる人<br> 106 ・顧客に対して紳士にかつ、丁寧に対応することができる人 107 108 </td> 109 </tr> 110 111 112 113 114 </table> 115 <div class="titele2"> 116 ※募集は終了しました。 117 118 </div> 119 <table class="kaisha"> 120 <tr> 121 <th>職種:</th> 122 <td> 123 総務(経験者) 124 </td> 125 </tr> 126 <tr> 127 <th>雇用形態</th> 128 <td> 129 正社員 130 </td> 131 </tr> 132 133 <tr> 134 <th>対象となる方</th> 135 <td>エクセル(必須)事務の実務経験5年以上の者<br> 136 学歴:大学卒業以上 年齢:資格不問<br> 137 英語、中国語、スペイン語、韓国語、インドネシア語、ポルトガル語<br> 138 のいずれか1つ話せる方は優遇します。 139 140 141 </td> 142 </tr> 143 144 <tr> 145 <th>勤務地</th> 146 <td> 147 東京本社(都内)でのテレワーク勤務になります。 148 リモートワーク中心です。 149 150 </td> 151 </tr> 152 153 <tr> 154 <th>給与</th> 155 <td>決算給与</td> 156 </tr> 157 158 <tr> 159 <th>職務内容</th> 160 <td> 161 顧客管理、文章作成、書類管理 162 163 </td> 164 </tr> 165 166 <tr> 167 <th>休日</th> 168 <td>土日祝日 年間休日120日<br> 169 顧客対応によって土日も出勤の場合も多数あります。<br> 170 在宅勤務が殆どです。東京本社勤務で転勤はありません。 171 </td> 172 </tr> 173 174 <tr> 175 <th>平均残業時間</th> 176 <td>30時間</td> 177 </tr> 178 179 <tr> 180 <th>勤務時間</th> 181 182 <td> 183 ◆9:00~18:00(実働8時間) 184 休憩時間70分 185 午前7分 お昼休み54分 午後7分<br> 186 東京都内の在宅勤務です。 187 ★残業は月平均30h程度 188 189 </td> 190 </tr> 191 192 <tr> 193 <th> 求める人材</th> 194 <td>・常に新しいものを求め、それを的確に提案できる者。<br> 195 ・在宅勤務が多いため、コツコツ仕事ができる人<br> 196 ・顧客に対して紳士にかつ、丁寧に対応することができる人<br> 197 ・コミニケーションが得意な方。<br> 198 ・テレワーク勤務者の意見やプロジェクトをまとめられる人<br> 199 200 201 </td> 202 </tr> 203 </table> 204</div> 205</body> 206</html>

css

1/* 採用内容のテーブル */ 2 3 .kaisha { 4width: 100%; 5 6} 7 8.kaisha th, 9.kaisha td { 10border: 1px solid #ccc; 11padding: 20px; 12width: 10px; 13} 14 15.kaisha th { 16font-weight: bold; 17background-color: #dedede; 18 19} 20/* 募集は終了しましたのタイトル */ 21.titele2{ 22 font-size: 55px; 23 color: black; 24 text-align: center; 25 margin-top: 20px; 26 margin-bottom: 15px; 27 font-weight: 700; 28 background-color: blue; 29 30}

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

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

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

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

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

guest

回答1

0

ベストアンサー

.kaishatable-layout: fixed; を追加して、セルの幅の指定は.kaisha thにだけwidthを設定してあげれば良いと思います。

投稿2021/07/26 08:16

itagagaki

総合スコア8402

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

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

ghtew2

2021/07/26 08:57

ありがとうございます。無事解決できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問