Signup/Sign In

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.

Table

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.

fixed width <td>