Responsive HTML Table With Rounded Corners

This code snippet provides a ready-to-use HTML and CSS template for creating a responsive HTML table with rounded corners. The table is designed to be visually appealing, with a stylish caption and headers, as well as a scrollbar for smooth navigation in case of overflowing content.

This code is particularly helpful for anyone looking to display tabular data in a modern and mobile-friendly way, ensuring the table adapts seamlessly to different screen sizes and devices. Easily customize the content and style to suit your specific needs and present your data with elegance and responsiveness.

How to Create HTML Table With Rounded Corners

1. Create the HTML structure for the table as follows:

<h2>Responsive HTML Table with Rounded Corners</h2>

<div class="table-wrap">
	<div class="table-block">
		<table>
			<caption>
				<strong>Table 1</strong> Team roles and contact details.
			</caption>
			<thead>
				<tr>
					<th colspan="4">
						Meet the Team
					</th>
				</tr>
				<tr>
					<th>
						Name
					</th>
					<th>
						Role
					</th>
					<th>
						Location
					</th>
					<th>
						Contact
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						David
					</td>
					<td>
						Designer
					</td>
					<td>
						Michigan
					</td>
					<td>
						dave@team.com
					</td>
				</tr>
				<tr>
					<td>
						Michelle
					</td>
					<td>
						Writer
					</td>
					<td>
						New York
					</td>
					<td>
						michelle@team.com
					</td>
				</tr>
				<tr>
					<td>
						Chuck
					</td>
					<td>
						Project Manager
					</td>
					<td>
						Dubai
					</td>
					<td>
						chuck@remote.com
					</td>
				</tr>
				<tr>
					<td>
						Hannah
					</td>
					<td>
						Developer
					</td>
					<td>
						Philadelphia
					</td>
					<td>
						hannah@contract.com
					</td>
				</tr>
			</tbody>
		</table>

	</div>
</div>

2. Style the table using the following CSS styles:

body {
 background-color: #AAB8E0;
 font-family: "Lato", sans-serif;
 box-sizing: border-box;
}
.cd__main{
  display: block !important;
}
h2{
   font-size: 22px;
   text-align: center;
   margin: 15px;
   color: #444;
}
html {
 width: 100%;
}

/**** tables ****/

/* table wrapper (what the actual block sits in)*/
.table-wrap {
	display: block;
	max-width: 100%;
	text-align: center;
}

/* table block (the actual block)*/
.table-block {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.4em;
	margin-bottom: 0.2em;
	max-width: 100%;
	overflow-y: auto;
	-webkit-box-shadow: 0px 4px 15px 2px rgba(0, 0, 0, 0.2),
		0px 30px 30px -14px rgba(80, 53, 199, 0.05);
	box-shadow: 0px 4px 15px 2px rgba(0, 0, 0, 0.2),
		0px 30px 30px -14px rgba(80, 53, 199, 0.05);
	-webkit-border-radius: 11px;
	border-radius: 11px;
	background-color: rgba(0, 0, 0, 0);
	position: relative;
	text-align: left;
}

/* table caption */
table caption {
	box-sizing: border-box;
	caption-side: bottom;
	padding: 8px;
	font-size: 0.9em;
	line-height: 1em;
	vertical-align: middle;
	text-align: left;
	border: 1px solid #d3d3d3;
	border-top: 0px;
	-webkit-border-radius: 0 0 11px 11px;
	border-radius: 0 0 11px 11px;
	white-space: normal;
	right: 0px;
	left: 0px;
	position: relative;
	background-color: #fff;
	overflow: auto;
}

/* Table # */
table caption strong {
	text-transform: uppercase;
	padding-right: 0.1em;
	font-size: 0.8em;
	color: #555;
	font-weight: normal;
	vertical-align: top;
	line-height: 1.4em;
}

/* table */
table {
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	padding: 0px;
	margin: 0px;
	border: 0px;
	border-collapse: separate;
	border-spacing: 1px;
	background-color: #d3d3d3;
	width: 100%;
}

th,
td {
	border: 0px solid #d3d3d3;
	padding: 0.3em;
	background-color: #fff;
	width: 1%;
}

th {
	background-color: #ebebeb;
}

/* border radius fix */
thead:first-of-type tr:first-child th:first-child {
	-webkit-border-radius: 10px 0 0 0;
	border-radius: 10px 0 0 0;
}

thead:first-of-type tr:first-child th:last-child {
	-webkit-border-radius: 0 10px 0 0;
	border-radius: 0 10px 0 0;
}

thead:first-of-type tr:first-child th:only-child {
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
}

/* table header */
table thead tr:first-child th {
	background-color: #5f6cb3;
	color: #fff;
	text-align: center;
}

/**** Scrollbar ****/
/* width */
::-webkit-scrollbar {
	width: 13px;
}

/* Track */
::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 10px;
	border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.4);
}

/* table scroll bar */
/* width */
.table-block::-webkit-scrollbar {
	height: 13px;
}

/* Track */
.table-block::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

That’s all! hopefully, you have successfully created a responsive HTML table with rounded corners. If you have any questions or suggestions, feel free to comment below.