CODEWITHSUNDEEP
csshtmltwitter-bootstrap
DUDUM
DUDUM

Reputation: 61

Bootstrap Table Width

I have a problem with the table width, I want to auto adjust the width of the table header. How to do this?

How do I turn this:

enter image description here

Into this:

enter image description here

Upvotes: 6

Views: 25685

Answers (4)

Emraan Aly
Emraan Aly

Reputation: 145

table-response may serve your requirement.

<table class="table table-responsive">
...
</table>

Upvotes: 1

d.h.
d.h.

Reputation: 1206

I assume you want to auto adjust the width of the table cells to its content. In that case you need to set the width of the table to "auto".

Example: https://jsfiddle.net/7r9svcu9/

<table style="width: auto;" class="table table-striped table-condensed">...</table>

Upvotes: 3

Debugger
Debugger

Reputation: 792

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

<table class="span12">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</th>
      <td>Val 2</th>
      <td>Val 3</th>
      <td>Val 4</th>
      <td>Val 5</th>
    </tr>
  </tbody>
</table>

For more Reference http://v4-alpha.getbootstrap.com/content/tables/

Upvotes: 0

Kali
Kali

Reputation: 13

try this 

 <table id="example" class="display nowrap" cellspacing="0" width="100%">

Upvotes: -1

Related Questions