Bootstrap表宽度

时间:2016-09-19 18:08:53

标签: html css html5 twitter-bootstrap

我的表宽有问题,我想自动调整表头的宽度。怎么做?

我该怎么做:

enter image description here

进入这个:

enter image description here

4 个答案:

答案 0 :(得分:0)

试试这个

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

答案 1 :(得分:0)

<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>

更多参考http://v4-alpha.getbootstrap.com/content/tables/

答案 2 :(得分:0)

我假设您要自动将表格单元格的宽度调整为其内容。在这种情况下,您需要将表格的宽度设置为“自动”。

示例:https://jsfiddle.net/7r9svcu9/

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

答案 3 :(得分:0)

表格响应可能符合您的要求。

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