tableの角が丸くなりません

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
tableの角を丸くしたいです。

###発生している問題・エラーメッセージ
色々と調べてコードを真似したのですが、角が丸くなりません。
原因がわかる方、どこを変えればいいのかぜひ教えていただきたいです。
よろしくお願いします。

###該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Info</title>
6    <link rel="stylesheet" type="text/css" href="style.css">
7    <script type="text/javascript" src="index.js"></script>
8
9</head>
10<body>
11    <div class="header">
12       
13    </div>
14
15    <div class="main">
16
17   <div class="whole-photo">
18      
19
20                 <div>
21                  <nav class="tab-change">
22                        <a href='#howtosee'>情報の見かた</a>
23                      <a href='#this-week'>一週間</a>
24                       <a href='#today'>今日</a>
25
26
27                    </nav>
28                </div>
29
30
31
32                    <div id='today' class='content'>
33          <h2 class="title2">♪<span id="view_today"></span>情報</h2>
34                         <table border="1" rules="cols" class="days">
35
36                           <tr>
37                            <td>9時</td>
38                            <td>12時</td>
39                            <td>15時</td>
40                            <td>18時</td>
41                            <td>21時</td>
42                         </tr>
43
44
45                               <td>
46                                   <img src="1.png">
47
48                               </td>
49                               <td>
50                                   <img src="2.png">
51                               </td>
52                               <td>
53                                   <img src="5.png">
54                               </td>
55                               <td>
56                                   <img src="3.png">
57                               </td>
58                               <td>
59                                   <img src="2.png">
60                               </td>
61                           </tr>
62
63                       </table>
64
65                    </div>
66                    <div id='this-week' class='content'>
67                        <h2 class="title">情報</h2>
68                         <table  border="1" rules="cols" class="week">
69
70                           <tr>
71                            <td>月</td>
72                            <td>火</td>
73                            <td>水</td>
74                            <td>木</td>
75                            <td>金</td>
76                            <td>土</td>
77                            <td>日</td>
78
79                         </tr>
80
81
82                               <td>
83                                   <img src="pic1.png">
84                               </td>
85                               <td>
86                                   <img src="pic3.png">
87                               </td>
88                               <td>
89                                   <img src="pic4.png">
90                               </td>
91                               <td>
92                                   <img src="pic2.png">
93                               </td>
94                               <td>
95                                   <img src="pic1.png">
96                               </td>
97                               <td>
98                                   <img src="pic3.png">
99                               </td>
100                               <td>
101                                   <img src="pic4.png">
102                               </td>
103
104                           </tr>
105
106                       </table>
107
108                    </div>
109                    <div id='howtosee' class='content'>
110                        <img src>
111                        <img src>
112                    </div>
113
114
115          <div class="push"></div>
116
117
118
119</div>
120
121<div class="footer">
122       
123    </div>
124</body>
125</html>

CSS
1.main{
2    width: 100%;
3    height: 1000px;
4    padding: 100px 0px;
5    margin: 0px;
6
7}
8
9
10.whole-photo{
11  margin-left:70px;
12  margin-top: 50px;
13  position:relative;
14}
15
16
17
18.photoframe {
19  position: relative;
20  display: inline;
21  float: left;
22  width: 340px;
23  height: 430px;
24  overflow: hidden;
25  margin: 0 10px 20px;
26  padding: 15px;
27  background: #ffffff;
28  border: 1px solid rgba(0, 0, 0, 0.3);
29  text-align: center;
30  -webkit-border-radius: 2px;
31  -moz-border-radius: 2px;
32  border-radius: 2px;
33  -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
34  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
35  box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
36  z-index: 1;
37}
38
39.photoframe .photo {
40  width: 340px;
41  height: 385px;
42  overflow: hidden;
43  margin: 0 0 10px;
44  padding: 0;
45  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
46  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
47  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
48}
49
50.photoframe img {
51  position: relative;
52  display: block;
53  margin: 0;
54  padding: 0;
55  z-index: -1;
56  width:339px;
57  height:359px;
58}
59
60
61.note{
62    width:390px;
63    height:460px;
64    float:right;
65    margin-right:160px;
66    position: relative;
67    background-color: #ffffe7;
68    background-image:
69    linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
70    background-size: 100% 1.5em;
71    line-height:1.5em;}
72
73
74
75
76.in{
77  padding-bottom: 20px;
78  font-size: 28px;
79  margin-top: 5px;
80
81}
82
83
84.letters{
85  padding-top:10px;
86  padding-left:20px;
87  padding-right:20px;
88  font-size:28px;
89  line-height:130%;
90}
91
92.tab-change a{
93  border-radius: 7px 7px 0 0;
94  display:inline-block;
95  line-height: 38px;
96  font: sans-serif;
97  text-align: center;
98  background-color:white ;
99  color: black;
100  margin-left: 0x;
101  margin-right:100px;
102  margin-top:90px;
103
104  float:right;
105  text-decoration: none;
106  padding: 0 32px;
107}
108.tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
109.tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
110.tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }
111
112
113
114.content {
115
116  height: 320px;
117  display: none;
118  padding: 0px;
119
120}
121
122.content:target {
123  display: block;
124}
125.title{
126  border:none;
127  padding-top:200px;
128
129}
130
131.title2{
132margin-left:40px;
133border:none;
134padding-top:200px;
135
136}
137.table {
138	border: 1px solid #aaa;
139  border-collapse:separate;
140
141
142
143  -webkit-border-radius:10px;
144
145  -moz-border-radius:10px;
146
147  border-radius:15px;
148  margin-left:60px;
149
150
151}
152.table th,
153.table td {
154	padding: .5em 2em;
155	border: 1px solid #aaa;
156}
157.table thead th {
158	background-color: #ddd;
159}
160.table tbody th {
161	background-color: #eee;
162}
163.days {
164           text-align: center;
165
166           font-size: 22px;
167           margin-top: 0px;
168           margin-left: 40px;;
169           margin-right: 0px;
170       }
171
172.days img {
173           width:   200px;
174       }
175
176.days tr td{
177  border:1px solid black;
178
179}
180
181.week{
182  text-align: center;
183
184  font-size: 22px;
185
186}
187.week img {
188  width:160px;
189
190}
191
192
193 .box:after {
194           content: ' ';
195           clear: both;
196           display: block;
197       }

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

回答2件

ベストアンサー

とりあえず.tableを作っているのにtable要素にクラスがつけられていないことと、<tr>が足りていないことを直して、「そもそも角丸のテーブルが案外面倒なこと」を下記記事でどうぞ。

【CSS：角丸のテーブルを作成する方法 | NxWorld】
http://www.nxworld.net/tips/css-border-radius-table.html

投稿2017/06/26 15:05

kei344

総合スコア69400

miramikan

2017/06/26 15:33

ご指摘ありがとうございます。URLも貼ってくださってありがとうございました！

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

次の３つの違いについて

css
1table{} /* <table> */
2.table{} /* <htmlTag class="table"> */
3#table{} /* <htmlTag id="table"> */

しっかりと把握していれば防げるミスだと思います。

css
1table.c{} /* <table class="c"> */
2table#i{} /* <table id="i"> */
3table .c{} /* <table><htmlTag class="c"> table内のclass="c"のタグ */
4table, .c{} /* <table> & <htmlTag class="c"> tableとclass="c"のタグの両方 */