1

I'm using Bootstrap 4.0 alpha (http://v4-alpha.getbootstrap.com/content/tables/)..

I've created a table with 5 columns but the width is automatically configured. I want to set the width percentage per column.

I've tried using class="col-xs-3" in th, as suggested in stackoverflow, without success.

I've found a post about this question. While the title says He uses Bootstrap V4... He's really using bootstrap 3.3.7. (How to specify responsive column width for table in Bootstrap v4)

<table class="table table-striped table-hover table-responsive">
    <thead class="thead-inverse">
    <tr>
      <th>Date</th>
      <th>Description</th>
      <th>Amount</th>
      <th>Comments</th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let expense of expenses">
      <td>{{expense.datetime | date}}</td>
      <td>{{expense.description}}</td>
      <td>{{expense.amount | currency:'USD':true}}</td>
      <td>{{expense.comment}}</td>
      <td></td>
    </tr>
    </tbody>
  </table>
Community
  • 1
  • 1
Federico Comesaña
  • 91
  • 1
  • 7

1 Answers1

3

I migrated from 3.3 to 4 so there could be a little funkiness.

  1. The div container that holds the table col-xs-12 must be set
  2. tr in thead must be set as a row and maybe the width col-xs-12 set, depending on your needs
  3. table class table-responsive is also dependent on your needs
<div class="col-md-12">
  <table class="table table-responsive table-striped table-hover table-sm">
    <thead>
      <tr class="row col-xs-12">
        <th class="col-xs-9">Location</th>
        <th class="col-xs-3">Actions</th>
      </tr>
    </thead>
    <tbody>
      ...
    </tbody>
  </table>
</div>
Dan Lowe
  • 51,713
  • 20
  • 123
  • 112
Rapidmod
  • 382
  • 1
  • 6
  • I couldnt post sample code....... [link](https://pastebin.com/AL9cqnpH) – Rapidmod Jan 26 '17 at 14:00
  • 1
    I fixed your code sample. When you are adding code and it immediately follows a numbered list, the indent is doubled (indent 8, not 4). That's why your code was hidden, it was being rendered by the browser as HTML, not as a code sample block. You can get around this using a ` – Dan Lowe Jan 26 '17 at 14:28