How to make a table borderless in bootstrap?
May 24, 2022Hi 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.
All the best 👍
