Table column width in bootstrap 4

user_12716905 0
Viewed 1653

I am very new to bootstrap and am extending an existing MVC web application which uses bootstrap 4 by adding a table with form entry fields. I am trying to figure out how I can control the table column widths. One drop down list has long options, so I would like to be able to limit the size of that column and overflow/wrap the text in the drop down list, but I am struggling to be able to size even an empty table. Here is the existing div structure of the page and a dummy table I have put in with the same structure that the real one will have.

<div class="form-horizontal col-10 offset-1">
    <div class="row">
        <h5 class="mt-n1 pl-1">Section title</h5>
    </div>
    <div class="row" style="background-color:#e8eef4; border: 1px solid #d2d2d2; border-radius: 3px; padding-top: 4px;">
        <table class="table table-borderless table-condensed">
            <thead>
                <tr>
                    <th class="col-3">Column 1</th>
                    <th class="col-6">Column 2</th>
                    <th class="col-3">Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <select class="form-control">
                            <option>Select...</option>
                            <option>Option 1</option>
                            <option>Option 2</option>
                        </select>
                    </td>
                    <td>
                        <select class="form-control">
                            <option>Select...</option>
                            <option>An example of the really long text for the select option that will need to overflow.</option>
                            <option>Another example of the really long text for the select option that will need to overflow.</option>
                        </select>
                    </td>
                    <td>
                        <textarea class="form-control" cols=20 rows=2></textarea>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

This fails to control the column widths in the way I would expect. I have read about adding the container class to one of the divs to allow control of the column widths, but I am not sure which div to add it to. I have also read about using the table-responsive class, but I would prefer to not have the scrolling table. Any help you can offer would be greatly appreciated. https://codeply.com/v/fT9xOWEToJ

bootstrap-4 css html
1 Answers

You need to have col- for every <th> and <td> instead of just <th>. Also, add d-flex to enable flex behaviour.

This is the modified version of <table> codeblock:

<table class="table table-borderless table-condensed">
    <thead>
        <tr class="d-flex">
            <th class="col-3">Column 1</th>
            <th class="col-6">Column 2</th>
            <th class="col-3">Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr class="d-flex">
            <td class="col-3">
                <select class="form-control">
                    <option>Select...</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                </select>
            </td>
            <td class="col-6">
                <select class="form-control">
                    <option>Select...</option>
                    <option>An example of the really long text for the select option that will need to overflow.</option>
                    <option>Another example of the really long text for the select option that will need to overflow.</option>
                </select>
            </td>
            <td class="col-3">
                <textarea class="form-control" cols="20" rows="2"></textarea>
            </td>
        </tr>
    </tbody>
</table>
user_109806580
Related