<table>にborderが効かない

前提・実現したいこと

HTML CSSを使って表を作っています。border: 1px solid #aaaを指定すると枠が一応表示されるのですが、2重線が表示されず外枠がなく隙間もでき、ばらばらの表になってしまいます。

よろしくお願いします！

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4  <meta charset="UTF-8">
5  <title>excelみたいなの</title>
6  <link rel="stylesheet" href="stylee.css">
7 </head> 
8 <body>
9 	<article>
10		<table>
11			<tbody>
12				<tr>
13					<td>&nbsp</td>
14					<td class="abc">A</td>
15					<td class="abc">B</td>
16				</tr>
17				
18				<tr>
19					<td class="count">1</td>
20					<td><textarea rows="1" cols="14"></textarea></td>
21					<td><textarea rows="1" cols="14"></textarea></td>
22				</tr>
23			
24				<tr>
25					<td class="count">2</td>
26					<td><textarea rows="1" cols="14"></textarea></td>
27					<td><textarea rows="1" cols="14"></textarea></td>
28				</tr>
29			</tbody>
30		</table>
31	</article>
32 </body>
33</html>

css
1
2tbody td {
3	border: 1px solid #aaa;
4}

####追記

html
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4  <meta charset="UTF-8">
5  <title>excelみたいなの</title>
6  <link rel="stylesheet" href="style.css">
7 </head> 
8 <body>
9	<table>
10 	 
11 	 <tr>
12  	  <td>&nbsp</td><td>A</td><td>B</td>
13 	 </tr>
14 	 
15 	 <tr>
16   	  <td>1</td><td><textarea rows="1" cols="14"></textarea></td><td><textarea rows="1" cols="14"></textarea></td>
17  	 </tr>
18  	
19 	 <tr>
20   	  <td>2</td><td><textarea rows="1" cols="14"></textarea></td><td><textarea rows="1" cols="14"></textarea></td>
21  	 </tr>
22	</table>
23 </body>
24</html>

css
1table {
2	border: 1px solid #aaa
3}

m.ts10806

2018/11/11 19:09

コードはコードブロック ``` (バッククォート３つ)の中におさめてください。ファイルや言語が違う場合はブロックをわけていただけると分かりやすくなります

akasaru

2018/11/12 06:23

使い方が十分に分かっていませんでした...すみませんでした。ご指摘ありがとうございます！

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

回答3件

2重線が表示されず･･･

ボーダーの線種がsolidなので、2重線にするにはdoubleで指定する必要があります。

ボーダーのスタイルを指定する

「table」の作り方は、リンク先を参考にしてみてください。

表（table）の作り方と装飾の変え方【HTML＆CSS】

-追記-

追記のHTMLコードに対してのCSSコード。
・セルの隙間は「なし」で設定。
・外側2重線（1-2pxぐらいだと分かりづらいです。）で設定。
・内側1重線で設定。
・「textarea」の枠線「なし」で設定。

参考になるでしょうか？いろいろ試してみてください。

CSS
1table {
2  border-collapse: collapse;
3  border: 3px double #aaa;
4}
5
6table td {
7  border: 1px solid #aaa;
8}
9
10textarea {
11  border: 0;
12}
13

参考先：
外側の罫線だけを二重線にした表をスタイルシートで作るCSSの書き方

投稿2018/11/11 23:20

編集2018/11/13 12:28

yoshinavi

総合スコア3523

akasaru

2018/11/12 06:29

回答ありがとうございます。solidをdoubleに変えてみましたが表示は変わらなかったです...

akasaru

2018/11/12 06:56

貼ってくださったリンク先のコードを真似てみましたが、cssでborder(double)を指定しても外枠が付かないのにhtmlの<table border>を指定すると外枠がつきます... 一応解決はしましたが、cssでの指定ができない理由が分からないです。もしよろしければ、教えてください。よろしくお願いします。

yoshinavi

2018/11/12 07:12

今の解決済みのHTMLと、上手くいかなかったCSSを、追記で提示してください。

akasaru

2018/11/12 12:23

追記での提示しました。質問の不備申し訳ございません。追記のhtmlに<table border>を付けると枠が表示されます。

akasaru

2018/11/15 16:44

追記質問への回答ありがとうございます！

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

ベストアンサー

table th tdで線を変えてみたので、ご自身がどの部分をどのようにしたいか考えて変更してみてください。
(行列見出しはthに変更してあります)

html
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4  <meta charset="UTF-8">
5  <title>excelみたいなの</title>
6  <style>
7    /* ↓テーブル全体（外側） */
8    table {
9      border: 2px solid #caa;
10      /* 隙間をなくしたければ以下2行を有効に */
11      /* border-collapse: collapse; */
12      /* border-spacing: 0; */
13    }    
14    /* ↓見出しセル */
15    th {
16      border: 2px solid #aca;
17    }    
18    /* ↓通常セル */
19    td {
20      border: 2px solid #aac;
21    }
22    /* ↓全部同じ線でよければまとめてもOK
23    table , th , td {
24      border: 1px solid #ccc;
25    }
26     */
27  </style>
28 </head> 
29 <body>
30  <article>
31  <table>
32    <tbody>
33    <tr>
34      <th>&nbsp</th>
35      <th class="abc">A</th>
36      <th class="abc">B</th>
37    </tr>
38    <tr>
39      <th class="count">1</th>
40      <td><textarea rows="1" cols="14"></textarea></td>
41      <td><textarea rows="1" cols="14"></textarea></td>
42    </tr>
43    <tr>
44      <th class="count">2</th>
45      <td><textarea rows="1" cols="14"></textarea></td>
46      <td><textarea rows="1" cols="14"></textarea></td>
47    </tr>
48    </tbody>
49  </table>
50  </article>
51 </body>
52</html>