How to make a table borderless in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we walk through the complete process of creating a table borderless and using a simple bootstrap function.

Borderless table: To make the table borderless use the class table-borderless along with the class table class within the <table> tag. and table-borderless within the <table> tag. See the example below for illustration.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Include the code in body

This article will guide you to adding table borderless in Bootstrap with example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

	<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
		integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
		crossorigin="anonymous">

Step 3: Include the code in body

Include the code below in <body> to accept time from the user.

		<table class="table table-hover">
			<thead>
                <tr>
                    <th>S. No.</th>
                    <th>Name</th>
                    <th>City</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Vijay</td>
                    <td>Solapur</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Viraj</td>
                    <td>Miraroad</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Astha</td>
                    <td>Virar</td>
                    <td>34</td>
                </tr>
			</tbody>
		</table>
	</div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,
			initial-scale=1, shrink-to-fit=no">
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
		integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
		crossorigin="anonymous">
	<title>Bootstrap Tables</title>
	<style>
		h1 {
			color: #1c0080;
			text-align: center;
		}
		div {
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1> aGuideHub </h1>
		<!-- table, table-hover -->
		<table class="table table-hover">
			<thead>
                <tr>
                    <th>S. No.</th>
                    <th>Name</th>
                    <th>City</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Vijay</td>
                    <td>Solapur</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Viraj</td>
                    <td>Miraroad</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Astha</td>
                    <td>Virar</td>
                    <td>34</td>
                </tr>
			</tbody>
		</table>
	</div>
</body>
</html>

Check the output of the above code example.

Bootstrap, Table, Borderless

All the best 👍