styling for th + thead for summary

3 years ago · 226b2c506e
parent 7261ad706f
commit 226b2c506e
4 changed files with 26 additions and 15 deletions
--- a/index.html
+++ b/index.html
@ -5,6 +5,7 @@
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice Tracker</title>
+	<link rel="stylesheet" href="app.css">
  </head>
  <body>
    <div id="app"></div>
--- a/public/app.css
+++ b/public/app.css
@ -0,0 +1,7 @@
+td,th {
+	border:1px solid black;
+	padding:1em;
+}
+th {
+	background:lightgrey;
+}
--- a/src/components/show_category.vue
+++ b/src/components/show_category.vue
@ -60,8 +60,4 @@
 </template>

 <style scoped>
-td {
-	border:1px solid black;
-	padding:1em;
-}
 </style>
--- a/src/components/summary.vue
+++ b/src/components/summary.vue
@ -18,19 +18,26 @@
 <template>
 	<h2>Summary</h2>
 	<table>
-		<tr v-for="category in categories">
-			<td>{{category.category_id}}</td>
-			<td>{{category.category}}</td>
-			<td>{{category.chunks_practiced}}</td>
-			<td>{{category.instrument}}</td>
-			<td>{{category.weight}}</td>
-		</tr>
+		<thead>
+			<tr>
+				<th>category id</th>
+				<th>category</th>
+				<th>chunks practiced</th>
+				<th>instrument</th>
+				<th>weight</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="category in categories">
+				<td>{{category.category_id}}</td>
+				<td>{{category.category}}</td>
+				<td>{{category.chunks_practiced}}</td>
+				<td>{{category.instrument}}</td>
+				<td>{{category.weight}}</td>
+			</tr>
+		</tbody>
 	</table>
 </template>

 <style scoped>
-td {
-	border:1px solid black;
-	padding:1em;
-}
 </style>