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 {
+			padding: 0 15px;
+			font-style: normal;
+			background-position: 8px center;
+			background-repeat: no-repeat;
+			border-bottom: 1px solid var(--color-border);
+		}
+
+		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 {
+			padding-left: 40px;
+			width: 32px;
+			padding-right: 0px;
+		}
+
+		td.filenameColumn .innernametext {
+			color: var(--color-main-text);
+		}
+
+		.stationIcon {
+			width: 32px;
+			height: 32px;
+			background-repeat: no-repeat;
+			background-size: contain;
+			background-position: center;
+		}
+
+		.actionColumn {
+			width: auto;
+			padding-right: 40px;
+		}
+
+		.filenameColumn {
+			width: 100%;
+		}
+
 	}
 
 }
 
-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;
-}
-
-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 {
-	padding-left: 40px;
-	width: 32px;
-	padding-right: 0px;
-}
-
-td {
-	border-bottom: 1px solid var(--color-border);
-}
-
-td.filenameColumn .innernametext {
-	color: var(--color-main-text);
-}
-
-.stationIcon {
-	width: 32px;
-	height: 32px;
-	background-repeat: no-repeat;
-	background-size: contain;
-	background-position: center;
-}
-
-.actionColumn {
-	width: auto;
-	padding-right: 40px;
-}
-
-.filenameColumn {
-	width: 100%;
-}
-
 </style>