Bootstrap 4 table with one column larger than others

Question

I've created a Bootstra4 table with multiple columns. One of them needs to be larger than the others, in order to fit more text. I'd like to set the minimum width of the larger column, and let Bootstrap4 figure out the size of other columns. I've been trying different things, but I can't find a way of setting the width of the desired column. Appreciate any hints. Thanks.

Lets assume that column 11 should be larger.

<script  type="text/javascript">
  $(document).ready(function() {
    $('#mytable').DataTable(
      {
        "lengthMenu": [ [10, 20, 30, -1], [10, 20, 30, "All"] ]
      }
    );
  } );
</script>

<table id="mytable" class="table table-striped table-hover table-bordered">
  <thead>
    <tr>
      <th>column 1, default size</th>
      <th>column 2, default size</th>
      <th>column 3, default size</th>
      <th>column 4, default size</th>
      <th>column 5, default size</th>
      <th>column 6, default size</th>
      <th>column 7, default size</th>
      <th>column 8, default size</th>
      <th>column 9, default size</th>
      <th>column 10, default size</th>
      <th>column 11, 15% size/th>
      <th>column 12, default size</th>
      <th>column 13, default size</th>
      <th>column 14, default size</th>
      <th>column 15, default size</th>
      <th>column 16, default size</th>
      <th>column 17, default size</th>
      <th>column 18, default size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>column 1, default size</td>
      <td>column 2, default size</td>
      <td>column 3, default size</td>
      <td>column 4, default size</td>
      <td>column 5, default size</td>
      <td>column 6, default size</td>
      <td>column 7, default size</td>
      <td>column 8, default size</td>
      <td>column 9, default size</td>
      <td>column 10, default size</td>
      <td>column 11, 15% size</td>
      <td>column 12, default size</td>
      <td>column 13, default size</td>
      <td>column 14, default size</td>
      <td>column 15, default size</td>
      <td>column 16, default size</td>
      <td>column 17, default size</td>
      <td>column 18, default size</td>
    </tr>
  </tbody>
</table>

Apart from your described problem, you're missmatching `` with `` inside `` — Fabian S., Jun 12 '18 at 06:29
@FabianSchöner. Thanks. I've fixed the example in my text. It was a typo when I wrote the question , but this part of my code is right. — freeAR, Jun 12 '18 at 19:10

score 2 · Accepted Answer · answered Jun 12 '18 at 20:29

2

I found a solution that works for my case, in Set min-width in HTML table's <td>:

<td style="min-width:100px">

answered Jun 12 '18 at 20:29

freeAR

943
3
18
32

score 1 · Answer 2 · answered Oct 02 '19 at 12:36

1

If people are still looking for solution. This worked for me

table {
  table-layout: fixed;
}

answered Oct 02 '19 at 12:36

Aram Yako

41
1
5

score 0 · Answer 3 · answered Jun 12 '18 at 02:37

0

A correct way of doing this is using flexbox on the table. more info about flexbox here.

You could also use col-x being x=1,2,3...,12 (column width) on the table columns. More info about this way here

Hope that solves your problem!

answered Jun 12 '18 at 02:37

Ariel Mirra

1,117
1
10
17

1

Thanks for the flexbox info. I needed to keep it simpler now, using – freeAR Jun 12 '18 at 20:30

score 0 · Answer 4 · answered Jun 12 '18 at 05:13

0

Use a div in the eleventh th cell and set its min-width.

answered Jun 12 '18 at 05:13

mahan

12,366
5
48
83

Thanks. It works for me without a div: – freeAR Jun 12 '18 at 20:30

Bootstrap 4 table with one column larger than others

4 Answers4