tableを二つに横に並べたいけど、勝手にmarginが入って並ばない。

前提・実現したいこと

★★初期基本能力値★★と★★最終能力値★★を
横に並べたい。

発生している問題・エラーメッセージ

『★★初期基本能力値★★』に、
何故かmarginが出ており、そのせいか横に並べることが出来ません。

『★★最終能力値★★』ように、marginがない状態にしたいんですが、
見比べても違いが分からず、困っています。
もし、よろししければ教えて頂けると助かります。
出来れば、nouryoku_zentaiの中に、二つのtableが並ぶようにしたいと思っています。

該当のソースコード

css
1
2
3
4.zentai{
5	width: 1300px;
6	height: 1300px;
7	margin: 10;
8}
9
10.setumei{
11
12line-height: 0.5;
13font-size: 18px;
14}
15
16/*基本技能全体div*/
17.nouryoku_zentai{
18	margin: 0px;
19	width: 1200px;
20	height: 300px;
21
22}
23
24/*基本技能初期データdiv*/
25.nouryoku_kihonsyoki{
26	margin: 0px;
27	width: 500px;
28	height: 100;
29
30}
31
32/*基本最終技能データdiv*/
33.nouryoku_saisyu{
34	margin: 0px;
35	width: 500px;
36	height: 100;
37	float: left;
38}
39
40
41/*テキストボックス関係*/
42/*技能のテキストボックス*/
43input.ginou{
44	width: 50px; 
45	text-align: right;
46	font-size: 16px; 
47}
48
49
50/*能力のテキストボックス*/
51input.nouryoku{
52	 width: 50px; 
53	text-align: center;
54	font-size: 16px; 
55	background-color: #e0e0e0;
56	border:none;
57}
58
59/*技能の合計のテキストボックス、主に灰色にする*/
60input.ginougoukei{
61	 width: 50px; 
62	text-align: right;
63	font-size: 16px; 
64	background-color: #e0e0e0;
65	border:none;
66}
67
68
69
70/*技能の合計を灰色にする。*/
71td.ginougoukei{
72	background-color: #e0e0e0;
73}
74
75
76/*表の技能の合計を灰色にする。*/
77td.nouryoku{
78	background-color: #e0e0e0;
79}
80
81

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>質問</title>
6		<link rel="stylesheet" href="situmon.css">
7
8
9</head>
10<body>
11<div class="zentai">
12
13	<h1>2010学生探索者作成ツール</h1>
14
15<div class="nouryoku_zentai">
16	<div class="nouryoku_kihonsyoki">
17		<table border="1">
18			<tr>
19				<th colspan="8">★★初期基本能力値★★</th>
20			</tr>
21			<tr>
22				<th class="dice_nouryoku" id="str">STR</td>
23				<th class="dice_nouryoku" id="con">CON</td>
24				<th class="dice_nouryoku" id="pow">POW</td>
25				<th class="dice_nouryoku" id="dex">DEX</td>
26				<th class="dice_nouryoku" id="app">APP</td>
27				<th class="dice_nouryoku" id="siz">SIZ</td>
28				<th class="dice_nouryoku" id="int">INT</td>
29				<th class="dice_nouryoku" id="edu">EDU</td>
30			</tr>
31			<tr>
32				<td class="dice_nouryoku">2d6</td>
33				<td class="dice_nouryoku">3d6</td>
34				<td class="dice_nouryoku">3d6</td>
35				<td class="dice_nouryoku">3d6</td>
36				<td class="dice_nouryoku">3d6</td>
37				<td class="dice_nouryoku">2d6</td>
38				<td class="dice_nouryoku">2d6+6</td>
39				<td class="dice_nouryoku">6</td>
40			</tr>
41			<tr>
42				<td class="nouryoku"><input class="nouryoku" id="str_kinyu" name="str" type="text" onChange="zentai_syudou_keisan()"></td>
43				<td class="nouryoku"><input class="nouryoku" id="con_kinyu" name="con" type="text" onChange="zentai_syudou_keisan()"></td>
44				<td class="nouryoku"><input class="nouryoku" id="pow_kinyu" name="pow" type="text" onChange="zentai_syudou_keisan()"></td>
45				<td class="nouryoku"><input class="nouryoku" id="dex_kinyu" name="dex" type="text" onChange="zentai_syudou_keisan()"></td>
46				<td class="nouryoku"><input class="nouryoku" id="app_kinyu" name="app" type="text" onChange="zentai_syudou_keisan()"></td>
47				<td class="nouryoku"><input class="nouryoku" id="siz_kinyu" name="siz" type="text" onChange="zentai_syudou_keisan()"></td>
48				<td class="nouryoku"><input class="nouryoku" id="int_kinyu" name="int" type="text" onChange="zentai_syudou_keisan()"></td>
49				<td class="nouryoku"><input class="nouryoku" id="edu_kinyu" name="edu" type="text" onChange="zentai_syudou_keisan()"></td>
50			</tr>
51
52		</table>
53	</div>
54<br>
55<br>
56	<div class="nouryoku_saisyu">
57		<table border="1">
58			<tr>
59				<th colspan="8">★★最終能力値★★</th>
60			</tr>
61			<tr>
62				<th class="dice_nouryoku" >STR</td>
63				<th class="dice_nouryoku" >CON</td>
64				<th class="dice_nouryoku" >POW</td>
65				<th class="dice_nouryoku" >DEX</td>
66				<th class="dice_nouryoku" >APP</td>
67				<th class="dice_nouryoku" >SIZ</td>
68				<th class="dice_nouryoku" >INT</td>
69				<th class="dice_nouryoku" >EDU</td>
70			</tr>
71			<tr>
72				<td class="nouryoku"><input class="nouryoku" name="str_goukei" type="text"></td>
73				<td class="nouryoku"><input class="nouryoku" name="con_goukei" type="text"></td>
74				<td class="nouryoku"><input class="nouryoku" name="pow_goukei" type="text"></td>
75				<td class="nouryoku"><input class="nouryoku" name="dex_goukei" type="text" oninput ="age_hendou()"></td>
76				<td class="nouryoku"><input class="nouryoku" name="app_goukei" type="text"></td>
77				<td class="nouryoku"><input class="nouryoku" name="siz_goukei" type="text"></td>
78				<td class="nouryoku"><input class="nouryoku" name="int_goukei" type="text"></td>
79				<td class="nouryoku"><input class="nouryoku" name="edu_goukei" type="text" oninput ="bokoku_keisan()"></td>
80			</tr>
81		</table>
82	</div>
83</div>
84<br>
85
86
87
88</div>
89	</body>
90</html>

試したこと

ＩＤ化や大きさなど変えてみましたが、
特に変化せず、nouryoku_zentai　のmarginがなぜか残っている状態でした。
cssで、marginを0にしてみても効果が出ず、上手く回り込んでくれませんでした。

補足情報（FW/ツールのバージョンなど）

onChangeなど、一部、関係ないものだと思うものがございますが、
何か関係するかもしれないので、念のため残しておかせていただきました。

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

tableとtableの間の「<br>×2」を削除して、以下のCSSを追加してみてください。

CSS
1.nouryoku_kihonsyoki {
2    margin: 0px;
3    width: 500px;
4    height: 100;
5    float: left; /* ← 追加 */
6}

※「height: 100;」等、単位が抜けている所がありますので、全体を見直されて見てください。

投稿2019/02/11 03:13

yoshinavi

総合スコア3523

sanag

2019/02/11 09:39

ありがとうございます！！色々と抜けていたようです。無事に解決しました。もう少しこの辺りを勉強しなおしてみます！！

yoshinavi

2019/02/11 20:34

解決されて何よりです。 (^^)

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

表を横に並べるだけなら.nouryoku_zentaiの中にdisplay: flex;を追加すれば良いのではないでしょうか。その場合.nouryoku_saisyuの中のfloat: left;は必要ありません。

投稿2019/02/10 20:41

takopo

総合スコア484

sanag

2019/02/11 09:41

ありがとうございます。 float以外にも横並びに出来る方法を知りました！！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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