Question

如何设置bootstrap表的宽度？

我尝试使用class="col-md-2"，它不会影响宽度。表类的宽度似乎等于显示宽度。

在我的情况下，我有很多信息要通过表格显示，这将超出显示的宽度，因此我需要有水平滚动条。

这是我试过的最后一个代码。

<table class="table"> 
    <tr>
        <th class="col-md-1">Action</th>
        <th class="col-md-2">Description</th>
    </tr>
    <tr ng-repeat="x in Tablelist track by $index">
       <td>
           <div class="btn-group">
               <button class="btn btn-primary btn-xs" ng-click="Opensetprice(x.id,x.matcode,x.pr_qty)">$</button>
               <button class="btn btn-danger btn-xs" ng-click="Delete(x.doc_no,x.item_no, $index)">X</button>
           </div>
       </td>
       <td>{{x.material}}</td>
    </tr>
</table>

尝试使用table覆盖班级width:auto;宽度，没有任何帮助。

Answer 1

Bootstrap的<table>类不应与<table>标签一起使用。这些calsses设计用于可根据视口大小重新定位的元素。但由于%内的行/单元格无法重新定位，因此无效。

你必须寻找的是......

min-width中的列宽。
%width用于某些特定列，其内容在一定宽度后不应缩小。

注意： - 表本身就表现出响应行为。您只需要明智地使用<template ngFor let-row="$implicit" [ngForOf]="rows" let-i="index"> <tr class="row-rule-review "> <td class="col-applications"> <img class="stack-img" src="images/expand.png" (click)="toggleButton(i)"> </td> ... </tr> <tr class="row-extended"> <td colspan="8"> <div #target class="extended-content" id="extended-content-{{i}}" [style.height.px]="isExpand[i] ? 150 : 0"> <dcl-wrapper type="expandedComponent" *ngIf="isExpand[i]></dcl-wrapper> </div> </td> </tr> </template>。

Answer 2

将您的表格设为overflow: auto;

Answer 3

Bootstrap表应该根据它的内容调整它的宽度，你不需要用css属性或内联样式调整宽度。

如果您分享实际需要的屏幕截图，我可以为您提供更多帮助。

Answer 4

尝试在 CSS ：

中添加此内容

.table tr th:nth-child(2) { 
    width: 80%;  /*Custom your width*/
 }

：nth-child（n）选择器匹配其父元素的第n个子元素，无论其类型如何。

每列上的Bootstrap表自定义宽度

4 个答案: