How to Create a Responsive Table in Blogger?

Here is the step-by-step tutorial will guide you on how to create a responsive table in Blogger using simple HTML and CSS. You don’t need advanced knowledge, just follow the steps below to get a clean and responsive table in your Blogger post.

How to Create a Responsive Table in Blogger?

Step 1: Log in to your Blogger Dashboard > Go to Theme > Customize
Step 2: Navigate to Advanced > Add CSS
Step 3: Paste the following CSS code and click Save

Note: This is a one-time process, you don’t need to repeat it every time you create a table.

table {
	border-collapse: collapse;
	width: 100%;
	background-color: #ffffff;
	color: #000;
	text-align: left;
}

table tr > th {
	background: #04373D;
	color: #ffffff;
}

th,
td {
	padding: 8px;
	border: 0.1px solid #808080;
}

tr:hover {
	background-color: #ddd;
}

tr:nth-child(even) {
	background-color: #ddd;
}

/* Make Table Responsive */
@media screen and (max-width: 600px) {
	table {
		width: 100%;
	}
	thead {
		display: none;
	}
	tr:nth-of-type(2n) {
		background-color: inherit;
	}
	tr td:first-child {
		background: #f0f0f0;
		font-weight: bold;
		font-size: 15px;
		text-align: center;
	}
	tbody td {
		display: block;
		text-align: center;
	}
	tbody td:before {
		content: attr(data-th);
		display: block;
		text-align: center;
	}
}

Step 4: Create your table using an HTML editor
Step 5: Paste the table code into your Blogger post (in the HTML section)
Step 6: Publish or Update the post

See the Pen How To Create Responsive Table In Blogger (Blogspot)? by Hex ToiD (@vikask2y2) on CodePen.

Wrap Up

I hope this article helped you create a responsive table in Blogger/Blogspot. With a bit of CSS knowledge, you can further customize the look and feel to match your website design. If you found this tutorial helpful, please share it with others on social media and let them know how to easily create responsive tables in Blogger posts.