In Bootstrap, the table is an important component used for organizing and displaying data in rows and columns.
Below are the approaches to change the width of a column in the Bootstrap table:
Table of Content
Using Bootstrap Grid Classes
In this approach, we are using Bootstrap's grid system with the .col-* classes to change the width of columns in the table. The col-2 and col-10 classes allocate 2 and 10 grid columns respectively, affecting the width of the columns within the Bootstrap grid layout.
Example: The below example uses Bootstrap Grid Classes to change the width of a column in Bootstrap Table.
<!DOCTYPE html>
<head>
<title>Example 1</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
.table {
border: 2px solid #ff0000;
}
.table th,
.table td {
border-color: #ff0000;
}
</style>
</head>
<body>
<div class="container">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Using Bootstrap Grid Classes</h3>
<div class="row">
<div class="col-2">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>GeeksforGeeks</td>
</tr>
</tbody>
</table>
</div>
<div class="col-10">
<table class="table table-bordered">
<thead>
<tr>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bootstrap</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Output:
Using width Attribute
In this approach, we are using the width attribute directly in the <th> elements to set the width of each column as a percentage within a Bootstrap table.
Example: The below example uses width Attribute to change the width of a column in Bootstrap Table.
<!DOCTYPE html>
<head>
<title>Example 2</title>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Using width Attribute</h3>
<table class="table table-bordered border-dark">
<thead>
<tr>
<th width="10%">Name</th>
<th width="30%">Subject</th>
<th width="70%">Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>GFG</td>
<td>HTML</td>
<td>50</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
