CSS Bootstrap Table

Question

How to restrict width to each column of bootstrap table? I tried to play around but I cant seem to shrink the column.

https://plnkr.co/edit/XhwIUynVgAxMBpJo8x8N?p=preview

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container">
      <h2>Table</h2>
      <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th style="width:20px">Firstname</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Anna</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Debbie</td>
          </tr>
          <tr>
            <td>3</td>
            <td>John</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

Just set your table to width: auto or give it a fixed width of your preference, e.g width: 200px — Chris
– Chris, Commented Feb 17, 2016 at 22:29
the thing is i want to append column so i dont want to limit the table size : ( I am doing angularJS with ng-repeat to append the column based on the number of entry in database. So I want each column to be fixed size — Zanko
– Zanko, Commented Feb 17, 2016 at 22:56

Chris · Accepted Answer · 2016-02-17 23:06:13Z

1

You can set table-layout: fixed and have a static width of your columns.

.table {
  table-layout:fixed;
}

td, th {
  width: 90px;
}

Demo

.table {
  table-layout:fixed;
}

td, th {
  width: 90px;
  border: 1px solid black;
  text-align: left;
}

<table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Firstname</th>
            <th>Lastname</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Anna</td>
            <td>Lastname</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Debbie</td>
            <td>Lastname</td>
          </tr>
          <tr>
            <td>3</td>
            <td>John</td>
            <td>Lastname</td>
          </tr>
        </tbody>
      </table>

answered Feb 17, 2016 at 23:06

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr Rubix · Accepted Answer · 2016-02-18 14:18:50Z

0

You can also use the < colgroup> tag to format each column of your table

DEMO

<table class="table">
  <colgroup>
    <col style = "width : 50px">
    <col style = "width : 300px">
    <col style = "width : 100px">
  </colgroup>
  <thead>
    <tr>
      <th>#</th>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anna</td>
      <td>Lastname</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Debbie</td>
      <td>Lastname</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John</td>
      <td>Lastname</td>
    </tr>
  </tbody>
</table>

Don't forget to align your columns in your CSS

td, th { 

  text-align: left;
}

answered Feb 18, 2016 at 14:18

Mr Rubix

1,52716 silver badges27 bronze badges

Collectives™ on Stack Overflow

CSS Bootstrap Table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related