How To Set Fixed Width For In Bootstrap? - Studytonight

Trang chủ » Html Table Column Width Bootstrap » How To Set Fixed Width For In Bootstrap? - Studytonight

Có thể bạn quan tâm

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Từ khóa » Html Table Column Width Bootstrap