Question

嗨伙计们！我有这个形象：

enter image description here

我想将第一列调整为最小尺寸，其他列必须覆盖页面的最大宽度。我会以这种方式尝试，这是我的css代码：

/* generic style*/
table, td, th {
    border: solid# CCC;border - width: 1 px 0;border - collapse: collapse
}
.check {
    padding: 5 px 0 px;width: 1000 px
}
.name {
    padding: 5 px 100 px;width: 1000 px
}
.family {
    padding: 5 px 40 px;width: 1000 px
}
.productCode {
    padding: 5 px 30 px;width: 1000 px
}
.descr {
    padding: 5 px 20 px;width: 1000 px
}
td {
    padding: 5 px 0 px;width: 1000 px
}

/* fixed header */
div.tablewrap {
    position: relative;width: 1000 px;padding - top: 20 px
}
div.tablewrap - inner {
    width: 1000 px;height: 230 px;overflow: auto
}
div.tablewrap thead tr {
    position: absolute;top: -3 px
}

这是我的HTML代码：

<div class="tablewrap">
    <div class="tablewrap-inner">
        <div ng-controller="ctrlRead">
            <table class="table  table-hover" border="1">
                <thead>
                    <tr>
                        <th class="check">
                            <input type="checkbox" onclick="checkAll(this)" />
                        </th>
                        <th class="name">Nome&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
                        <th class="family">Famiglia&nbsp;<a ng-click="sort_by('family')"><i class="icon-sort"></i></a></th>
                        <th class="productCode">Codice prodotto&nbsp;<a ng-click="sort_by('productCode')"><i class="icon-sort"></i></a></th>
                        <th class="descr">Descrizione&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items | orderBy:sortingOrder:reverse " id="lista">
                        <td>
                            <input id="selectLine1" type="checkbox" value="{{item.check}}" />
                        </td>
                        <td>{{item.name}}</td>
                        <td>{{item.family}}</td>
                        <td>{{item.productCode}}</td>
                        <td>{{item.descr}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

请给我一些提示！

Answer 1

你的css中有

.check{padding: 5px 0px;width:1000px}

您可以将宽度更改为width:100px甚至更低，调整到最适合您的范围

.check{padding: 5px 0px; width:100px}

Answer 2

我喜欢使用<colgroup>和<col>。

在桌子开口标签后直接插入。（并删除样式表中的所有宽度）

<table>
    <colgroup>
        <col width="50px" />
        <col span="4" width="*" />
    </colgroup>

第一列宽度为50px，后面的四列将具有自动宽度。当然，您也可以分别为每列设置宽度。

这些标记的另一个好处是，您可以为列中的所有单元格提供相同的类（使用简单的demo）：

<colgroup>
    <col class="red" />
</colgroup>

标题和数据的大小相同

2 个答案: