How to change the Width of a Column in Bootstrap Table ?

Last Updated : 05 Apr, 2024

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
Using width Attribute

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.

HTML

<!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:

Screenshot-2024-04-01-at-10-50-21-Example-1

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.

HTML

<!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>