Bootstrap columns with drop downs are too narrow

How do I control the column widths in a table on a page that uses bootstrap?
Bob SchneiderCo-OwnerAsked:
Who is Participating?
 
zephyr_hex (Megan)DeveloperCommented:
If you are using the table to present data (and not to position HTML elements in a grid like fashion on the page), then you need to set the CSS style attribute on the header cell of the column (or apply a class to that cell and set the width in CSS separately).

https://jsfiddle.net/zephyr_hex/ggjLemaf/2/

<table>
<thead>
<tr>
  <th>Col 1</th>
  <th style="width: 100px;">Col 2</th>
  <th>Col 3</th>
</tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</tbody>
</table>

Open in new window

NOTE:  I've shown a static width.  You could also use a percent.

IF you are using a table to position HTML elements, then you'll need to remove the table and use div's instead.  You can control the div width using Bootstrap Grid.

https://jsfiddle.net/zephyr_hex/ggjLemaf/8/

From Bootstrap's Grid documentation:

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Open in new window

0
 
Bob SchneiderCo-OwnerAuthor Commented:
Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.