PUBLISHED ON: AUGUST 7, 2021
How to set fixed width for <td> in bootstrap?
The tables uses <td> element to add contents as a row in the table. The table cell <td> can be of variable width depending on the size of the content. Let us take an example to create a table using variable-width table cells using Bootstrap 5.
The Default Table
To create a table add .table class to <table> tag. Add header elements using <th> tag . <thead> tag denotes the head of the table. For adding contents use <td> tag. The <tr> tag denotes the row of table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table Creation</h2>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Item</th>
<th scope="col">Description</th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Any item</td>
<td>Add long content to see variable width cell</td>
<td>Active</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Any item 2</td>
<td>Add long content to see variable width cell</td>
<td>Disable</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Any item 3</td>
<td>Add long content to see variable width cell</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Here in the output, we can see that the table cells have a variable width.
Set fixed width for <td> using Bootstrap 5
The <td> element can be set to fixed width using the Width utility class. The available width utility class in Bootstrap are w-25, w-50, w-75, w-100. Here in the below program, we have added .w-25 class to each <td> to create a <td> of fixed width.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> Table Creation</h2>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Item</th>
<th scope="col">Description</th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="w-25">Any item</td>
<td class="w-25">Add long content to see variable width cell</td>
<td class="w-25">Active</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="w-25">Any item 2</td>
<td class="w-25">Add long content to see variable width cell</td>
<td class="w-25">Disable</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="w-25">Any item 3</td>
<td class="w-25">Add long content to see variable width cell</td>
<td class="w-25">Active</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Here is the output of the above program.
