How to remove the underline at the end of the table in Bootstrap 5?
Last Updated :
17 Nov, 2023
Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive. In this article, we will learn about How to remove the underline at the end of the table in Bootstrap 5.
Following are the approaches through which we can remove the underline at the end in Table:
Approach 1: Using CSS property border-bottom: none
Using CSS property border-bottom:none. We will set bottom border to none here
Syntax:
<td style="border-bottom: none;">...</td>
Example: Below is the implementation of the above approach
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
How to remove the underline at the
end of the table in Bootstrap 5?
</h2>
</center>
<table class="table caption-top ">
<caption>
Front-end Courses
</caption>
<thead class="table-dark">
<tr>
<th scope="col">
No
</th>
<th scope="col">
Course
</th>
<th scope="col">
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
HTML- Basics
</td>
<td>
Rs 29
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
CSS- Basics
</td>
<td>
Rs 25
</td>
</tr>
<tr>
<th scope="row"
style="border-bottom: none;">
3
</th>
<td style="border-bottom: none;">
JS- Basics
</td>
<td style="border-bottom: none;">
Rs 35
</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Approach 2: Using .table tr:last-child th, .table tr:last-child td
Using .table tr:last-child th, .table tr:last-child td . We will access the last child
Syntax:
<style>
.table tr:last-child th,
.table tr:last-child td {
border: none;
}
</style>
Example: Below is the implementation of the above approach
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.table tr:last-child th,
.table tr:last-child td {
border: none;
}
</style>
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
How to remove the underline at the
end of the table in Bootstrap 5?
</h2>
</center>
<table class="table caption-top ">
<caption>
Front-end Courses
</caption>
<thead class="table-dark">
<tr>
<th scope="col">
No
</th>
<th scope="col">
Course
</th>
<th scope="col">
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
HTML- Basics
</td>
<td>
Rs 29
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
CSS- Basics
</td>
<td>
Rs 25
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td>
JS- Basics
</td>
<td>
Rs 35
</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Approach 3: Using table > tbody > tr:last-child > *
Using table > tbody > tr:last-child > *. We will access the last child
Syntax:
<style>
table>tbody>tr:last-child>* {
border-bottom-width: 0;
}
</style>
Example: Below is the implementation of the above approach
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
table>tbody>tr:last-child>* {
border-bottom-width: 0;
}
</style>
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
How to remove the underline at
the end of the table in Bootstrap 5?
</h2>
</center>
<table class="table caption-top ">
<caption>
Front-end Courses
</caption>
<thead class="table-dark">
<tr>
<th scope="col">
No
</th>
<th scope="col">
Course
</th>
<th scope="col">
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1
</th>
<td>
HTML- Basics
</td>
<td>
Rs 29
</td>
</tr>
<tr>
<th scope="row">
2
</th>
<td>
CSS- Basics
</td>
<td>
Rs 25
</td>
</tr>
<tr>
<th scope="row">
3
</th>
<td>
JS- Basics
</td>
<td>
Rs 35
</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...