Table Td width always 100%

Question

I'd like to specify a width for the whole column based on TH. As you can see:

<table class="table table-hover table-bordered">
  <thead>
    <tr>
      <th style="width: 50px">TEST 50</th>
      <th style="width: 100px">TEST 100</th>
      <th style="width: 150px">TEST 150</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class"form-control" typ="text"></td>
      <td><input class"form-control" typ="text"></td>
      <td><input class"form-control" typ="text"></td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/aq9Laaew/148760/

It always gets 100%.

How could I have a table with 3 columns with 50px, 100px and 150px width.3. I use bootstrap4.

Carol Skelly · Accepted Answer · 2018-08-12T13:47:52.517

Bootstrap 4 tables are always width:100%. You can use the w-auto util class on the table to make it width:auto;

Make sure the HTML is properly structured.

<table class="table table-hover table-bordered w-auto">
      <thead>
        <tr>
          <th style="width:50px">TEST 50</th>
          <th style="width:100px">TEST 100</th>
          <th style="width:150px">TEST 150</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="form-control" type="text"></td>
          <td><input class="form-control" type="text"></td>
          <td><input class="form-control" type="text"></td>
        </tr>
      </tbody>
</table>

Demo: https://www.codeply.com/go/ONEQJYeJPN

Related: bootstrap 4 table column sizing

Table Td width always 100%

1 Answers1