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

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

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

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

HTML5

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

1344閲覧

htmlのtableのmarginを消したい

maakun

総合スコア22

CSS3

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

HTML5

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2019/02/21 02:41

編集2019/02/21 03:07

cssにてmarginをリセットしているにも関わらずtableにmarginがかかってしまいます。
消し方を教えて頂けたらと思います。
ブラウザはchromeでPCはwindowsになります。

以下、コードになります。

html

1<table> 2 <tr> 3 <td rowspan="2"><img src="./material/logo.png" width="60"></td> 4 <td>207</td> 5 </tr> 6 <tr> 7 <td>DAYS TO GO</td> 8 </tr> 9</table>

scss

1* { 2 margin: 0; 3 padding: 0; 4} 5table { 6 border-collapse: collapse; 7 border-spacing: 0; 8} 9 10 11#page-header { 12 table { 13 display: inline-block; 14 border: 1px solid #000; 15 border-radius: 5px; 16 tr { 17 &:nth-of-type(1) 18 td { 19 text-align: center; 20 21 &:nth-of-type(1) { 22 border-right: 1px solid #000; 23 } 24 &:nth-of-type(2) { 25 font-size: 3.5rem; 26 font-weight: bold; 27 padding: 0; 28 } 29 } 30 &:nth-of-type(2) { 31 td { 32 color: #fff; 33 background-color: #000; 34 padding: 1.0rem; 35 font-weight: bold; 36 text-align: center; 37 } 38 } 39 } 40 } 41}

申し訳ありません。
以下、コンパイル後のcssのコードになります。

css

1* { 2 margin: 0; 3 padding: 0; 4} 5table { 6 border-collapse: collapse; 7 border-spacing: 0; 8} 9 10border 11 table { 12 display: inline-block; 13 border: 1px solid #000; 14 border-radius: 5px; 15} 16table tr:nth-of-type(1) 17td { 18 text-align: center; 19} 20table tr:nth-of-type(1) 21td:nth-of-type(1) { 22 border-right: 1px solid #000; 23} 24table tr:nth-of-type(1) 25td:nth-of-type(2) { 26 font-size: 3.5rem; 27 font-weight: bold; 28 padding: 0; 29} 30table tr:nth-of-type(2) td { 31 color: #fff; 32 background-color: #000; 33 padding: 1.0rem; 34 font-weight: bold; 35 text-align: center; 36}

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

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

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

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

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

m.ts10806

2019/02/21 02:47 編集

SCSSではコンパイルが必要ですし、環境持っていても回答者に強いることになり手間です。(私は持っていませんが) コンパイル後のCSSを提示されたほうが回答が得られやすくなると思います。
maakun

2019/02/21 02:56

失礼しました。 CSS追記しました。
m.ts10806

2019/02/21 02:58

蛇足の確認ですが、このCSSに*の設定が加わっているわけですよね?
m.ts10806

2019/02/21 02:58

#page-headerとかtable もですね。
maakun

2019/02/21 03:07

申し訳ありません。 再度追記しました。
guest

回答1

0

ベストアンサー

tableに下記を入れたらいけそうです。
border-spacing: 0;
または
border-collapse: collapse; ←たぶんこっちのほうがいい

投稿2019/02/21 03:04

編集2019/02/21 03:06
m.ts10806

総合スコア80765

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

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

maakun

2019/02/21 03:24

すみません、いつの間にかmarginが消えてました... ご迷惑おかけしました(._.)
m.ts10806

2019/02/21 03:45

もとのscssに border-collapse: collapse; が入ってたからですね。 解決されたようで何よりです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問