table component: style sticky table header

src/App.vue

@@ -12,12 +12,12 @@
 			</template>
 		</AppNavigation>
 		<AppContent>
-			<Breadcrumbs>
+			<Breadcrumbs class="breadcrumbs">
 				<Breadcrumb title="Home" href="/" />
 				<Breadcrumb title="Top" href="/Top" />
 			</Breadcrumbs>
 			<Table
-				:stationData="tableData"
+				:station-data="tableData"
 				station-uuid="960b6cd6-0601-11e8-ae97-52543be04c81"
 				station-isfav="false"
 				station-img="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Radio_SRF_Virus.svg/205px-Radio_SRF_Virus.svg.png" />
@@ -50,7 +50,7 @@ export default {
 	}),
 	mounted() {
 		const vm = this
-		this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations/topclick?limit=10')
+		this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations/topclick?limit=20')
 			.done(function(data) {
 				vm.tableData = data
 			})

src/components/Table/Table.vue

@@ -12,7 +12,8 @@
 		<tbody v-if="stationData">
 			<tr v-for="(obj, ind) in stationData" :key="ind">
 				<td>
-					<div class="stationIcon" :style="style" />
+					<div class="stationIcon"
+						:style="{ backgroundImage: `url('${ obj.favicon }')` }" />
 				</td>
 				<td class="filenameColumn">
 					<span class="innernametext">
@@ -31,7 +32,6 @@
 				</td>
 			</tr>
 		</tbody>
-		{{ stationData }}
 	</table>
 </template>
 
@@ -63,28 +63,21 @@ export default {
 			default: '',
 		},
 	},
-	computed: {
-		style() {
-			return 'background-image: url(' + this.stationImg + ')'
-		},
-	},
 }
 </script>
 
 <style lang="scss">
 
 table {
-	position: relative;
 	width: 100%;
 	min-width: 250px;
-	display: block;
-	flex-direction: column;
 
 	thead {
-		position: sticky;
-		z-index: 60;
-		display: block;
 		background-color: var(--color-main-background-translucent);
+		z-index: 60;
+		position: sticky;
+		position: -webkit-sticky;
+		top: 50px;
 
 		th {
 			border-bottom: 1px solid var(--color-border);
@@ -92,70 +85,64 @@ table {
 			height: 50px;
 		}
 
+		th, th a {
+			color: var(--color-text-maxcontrast);
+		}
+
 		th.nameColumn {
 			width: 100%;
-			padding-left: 57px;
 		}
 
 	}
 
 	tbody {
-		display: table;
-		width: 100%;
-	}
 
-}
+		td {
-
-table th, table th a {
-	color: var(--color-text-maxcontrast);
-}
-
-table td {
 			padding: 0 15px;
 			font-style: normal;
 			background-position: 8px center;
 			background-repeat: no-repeat;
-}
+			border-bottom: 1px solid var(--color-border);
+		}
 
-tr {
+		tr {
 			height: 51px;
 			background-color: var(--color-background-light);
 
 			tr:hover, tr:focus, tr.mouseOver td {
 				background-color: var(--color-background-hover);
 			}
+		}
 
-}
+		tr td:first-child {
-
-tr td:first-child {
 			padding-left: 40px;
 			width: 32px;
 			padding-right: 0px;
-}
+		}
 
-td {
+		td.filenameColumn .innernametext {
-	border-bottom: 1px solid var(--color-border);
-}
-
-td.filenameColumn .innernametext {
 			color: var(--color-main-text);
-}
+		}
 
-.stationIcon {
+		.stationIcon {
 			width: 32px;
 			height: 32px;
 			background-repeat: no-repeat;
 			background-size: contain;
 			background-position: center;
-}
+		}
 
-.actionColumn {
+		.actionColumn {
 			width: auto;
 			padding-right: 40px;
-}
+		}
 
-.filenameColumn {
+		.filenameColumn {
 			width: 100%;
+		}
+
+	}
+
 }
 
 </style>