CSS

by r2creations24

HTML

<div class="center"> 
		<div class="table">
			<table>
				<thead>
					<tr>
						<th colspan = "3">Main Header</th>
					</tr>
				</thead>
				<thead>
					<tr>
						<th>ID</th>
						<th>Username</th>
						<th>Drinks Coffee?</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>roger_t</td>
						<td>Yes</td>
					</tr>
					<tr>
						<td>2</td>
						<td>cindy_p</td>
						<td>Yes</td>
					</tr>
					<tr>
						<td>3</td>
						<td>bob_l</td>
						<td>No</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

CSS

html {
	background-color: #004e5c;
}

body {
	color: whitesmoke;
  	background-color: #004e5c;
	display: flex;
	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
	width: 100vw;
	height: 100vh;
	margin: auto;
	padding: 0;
}

.center {
	width: 90%;
	margin: auto;
}

.table {
	align-content: center;
    display: grid;
}

table {
	border-collapse: collapse;
}

.table td {
	padding: 15px;
	text-align: left;
	transition: all 1s , color 0;
}

.table td:first-child {
	text-align: center;
}

.table td:last-child {
	text-align: right;
}

.table th {
	padding: 15px;
	text-align: center;
	border-left: black 2px solid;
	border-bottom: black 2px solid;
	background-color: coral;
}

tbody tr:hover td {
    color: black;
	transition: color 1s;
	position: initial;
}

tbody tr:hover {
	box-shadow: 0px 1px 20px 2px #9bd3ddb5;
    background-color: white;
    border: none;
    position: relative;
    transform: scaleX(1.05);
}