强制Bootstrap 3表头到固定宽度

时间:2015-05-08 16:24:20

标签: html css twitter-bootstrap styling

无论常规行中的内容如何,​​我都需要修复Bootstrap 3表中标题列的宽度。这是为了避免将内容分成两行,如下所示,看起来非常不整洁: Broken table headers

有没有办法做到这一点,最好不要为每个表格行填充,因为我对当前的间距感到满意。您可以在http://find-minecraft-servers.com/看到完整的表格,我已经包含了HTML,以及与下表相关联的自定义CSS。该表的内容由PHP生成,因此每个表格单元格中的值的长度可能会发生变化。

<table class="table bigtable" width="100%;">
      <thead>
        <tr>
          <th class="text-center"><i class="fa fa-list-ol"></i> RANK</th>
          <th class="text-center"><i class="fa fa-info-circle"></i> NAME</th>
          <th class="text-center"><i class="fa fa-server"></i> SERVER</th>
          <th class="text-center">
            <a href="?sort=votes" style="text-decoration:none;color:#fff;">
              <i class="fa fa-thumbs-o-up"></i> VOTES <i class="fa fa-sort" style="color:#84fb88;"></i>
            </a>
          </th>
          <th class="text-center"><i class="fa fa-dashboard"></i> STATUS</th>
          <th class="text-center">
            <a href="?sort=players" style="text-decoration:none;color:#fff;">
              <i class="fa fa-users"></i> PLAYERS <i class="fa fa-sort" style="color:#84fb88;"></i>
            </a>
          </th>
      </tr>
    </thead>
    <tbody>
      CONTENT...
    </tbody>
</table>

Custom.css:

.bigtable thead {
    background-color: #12bbb9;
    color: #fff;
    font-size: 14px;
}

.bigtable thead tr th {
    padding:8px 5px 8px 5px;
}

1 个答案:

答案 0 :(得分:0)

array(3) { [0]=> array(2) { ["name"]=> string(5) "Apple" ["manufacturer_id"]=> string(1) "8" } [1]=> array(2) { ["name"]=> string(3) "HTC" ["manufacturer_id"]=> string(1) "5" } [2]=> array(2) { ["name"]=> string(4) "Sony" ["manufacturer_id"]=> string(2) "10" } } 添加到//Set the value in the dropdown dojo.byId('a').selectedIndex = this.store.getValue(item, "id"); //Editable columns (double click or click +Enter) var layout = [[ {'name': 'Column 1', 'field': 'id', 'width': '100px'}, {'name': 'Column 2', 'field': 'col2', 'width': '100px',editable:true}, {'name': 'Column 3', 'field': 'col3', 'width': '200px',editable:true}, {'name': 'Column 4', 'field': 'col4', 'width': '150px',editable:true}, {'name': 'Last', 'field': 'last', 'width': '150px',editable:true} ]];,然后将table-layout:fixed提供给包含大图片的table

width