为什么 td max-width 在这种情况下不起作用？答案

【问题标题】：Why td max-width does not work in this case?为什么 td max-width 在这种情况下不起作用？
【发布时间】：2016-08-04 14:29:22
【问题描述】：

这是我的 HTML：

<div class="table-wrapper" ng-app="groupModule">

    <table class="tablify stylable" ng-controller="listController">

        <thead>

            <tr>
                <th>Group Name</th>
                <th>Parent Group</th>
                <th>Effect</th>
                <th class="col-actions">Edit</th>
                <th class="col-actions">Delete</th>
            </tr>

        </thead>

        <tbody>

            <tr ng-repeat="group in groups">

                <td>{{ group.groupName }}</td>
                <td>{{ group.parentGroupName }}</td>
                <td>{{ group.effect }}</td>
                <td class="col-actions">
                    <button type="button" class="btn btn-info btn-edit"></button>
                </td>
                <td class="col-actions">
                    <button type="button" class="btn btn-danger btn-delete"></button>
                </td>

            </tr>


        </tbody>

    </table>

</div>

这是我的 CSS：

.table-wrapper {
  overflow-y: auto;
  height: 75%;
}

table.stylable {
    text-align: center;
    width: 100%;
}

table.stylable th {
    padding: 5px 0;
    text-align: center;
    background-color: #353535;
    color: white;
    border-right: 1px solid #DDD;
    height: 40px;
    cursor: pointer;
    cursor: hand;
}

table.stylable tr {
    background-color: #EEE;
}

table.stylable td {
  background-color: transparent;
  border-right: 1px solid #DDD;
}
table.stylable th:last-child,
table.stylable td:last-child {
    border-right: 0px;
}

table.stylable tr th:first-child {
    border-top-left-radius: 6px;
}

table.stylable tr th:last-child {
    border-top-right-radius: 6px;
}

table.stylable tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

table.stylable tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

table.stylable tr:hover:not(.row-details):not(.selected) {
    background-color: #AAA;
    color: white;
}

table.stylable tr.selected {
    background-color: #777;
    color: white;
}

table.stylable tr:hover td {
    background-color: transparent;
}

table.stylable tr.selected td {
    background-color: transparent;
}

table.stylable table {
    width: 100%;
}

table.stylable td,
table.stylable th
{
    padding: 3px 8px;
    min-width: 65px;
}

.btn-edit,
.btn-delete
{
    position: relative;
    margin: 5px;
    border: none;
    width: 60%;
    padding: 0;
    padding-bottom: 60%;
    height: 0;
    background-size: contain;
}

.btn-edit {
    background-image: url(../images/Edit.png);
}

.btn-delete {
    background-image: url(../images/Delete.png);
}

.col-actions
{
    max-width: 80px;
}

如果有人想要，那么这里是角码：

var groups = [{groupCode: 1, groupName: "Branch / Divisions"},
              {groupCode: 2, groupName: "Capital Account", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 3, groupName: "Current Assets", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 4, groupName: "Current Liabilities", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 5, groupName: "Direct Expenses", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 6, groupName: "Direct Incomes", natureOfGroup: {natureOfGroupCode: 3, nature:"Incomes"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 7, groupName: "Fixed Assets", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 8, groupName: "Indirect Expenses", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 2, effect: "Profit & Loss Account"}},
              {groupCode: 9, groupName: "Indirect Incomes", natureOfGroup: {natureOfGroupCode: 3, nature:"Incomes"}, effectOfGroup: {effectOfGroupCode: 2, effect: "Profit & Loss Account"}},
              {groupCode: 10, groupName: "Investments", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 11, groupName: "Loans (Liability)", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 12, groupName: "Misc. Expenses (Asset)", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 13, groupName: "Purchase Accounts", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 14, groupName: "Sales Accounts", natureOfGroup: {natureOfGroupCode: 3, nature:"Incomes"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}},
              {groupCode: 15, groupName: "Suspense A/c", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 16, groupName: "Bank Accounts", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 17, groupName: "Bank OD A/c", alias: "Bank OCC A/c", parentGroupCode: 11, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 18, groupName: "Cash-in-hand", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 19, groupName: "Deposits (Asset)", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 20, groupName: "Duties & Taxes", parentGroupCode: 4, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 21, groupName: "Loans & Advances (Asset)", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 22, groupName: "Provisions", parentGroupCode: 4, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}},
              {groupCode: 23, groupName: "Reserves & Surplus", alias: "Retained Earnings", parentGroupCode: 2, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}];

angular.module('groupModule', [])
       .controller("listController", function($scope){
           $scope.groups = groups.map(function(g){ return {
               groupCode: g.groupCode,
               groupName: g.groupName,
               parentGroupName: groups.filter(function(x){ return x.groupCode == g.parentGroupCode; })[0] == undefined ? 'Primary' : groups.filter(function(x){ return x.groupCode == g.parentGroupCode; })[0].groupName,
               nature: g.natureOfGroup == undefined ? '' : g.natureOfGroup.nature,
               effect: g.effectOfGroup == undefined ? '' : g.effectOfGroup.effect
           }});
       });

这里是 JSFiddle 重现问题：

https://jsfiddle.net/Vishal1419/n7qmt8wt/

【问题讨论】：

将max-width 分配给<th> 而不是<td>
你的 css 中没有一个 max-width 实例。
@GauravAggarwal 我已经将 max-width 应用于 th。你能看到 col-actions 类吗？这适用于 th 和 td 两者。
@AdrianBrand 有 col-actions 类。在 css 中查看它的最大宽度。
@GauravAggarwal 我已经用 jsfiddle 链接更新了我的问题

标签： javascript html css angularjs json

【解决方案1】：

对于表格单元格，应使用width 属性，因为表格单元格的“最小宽度”和“最大宽度”未定义。见specification：

'min-width' 和 'max-width' 对表格、内联表格的影响，表格单元格、表格列和列组未定义。

您只需要记住，单元格也会缩小到给定宽度以下，因为 CSS 会根据表格的宽度和单元格内容计算单元格的宽度。

所以你可以使用fixed table layout，它将改变宽度计算背后的算法。

但是我通常做的是用div 元素制作我自己的网格，而不是使用表格（因为它们的奇怪行为）。

【讨论】：

能否请您详细说明使用自己的网格而不是表格
所以，不要使用table、th、td，你只需使用divs（或者你可以将表格元素重置为block/inline-block元素，我认为这样更好，因为元素的语义含义）。当然——这个重置会破坏你的布局，因为块和内联块元素的行为与表格元素完全不同——你必须重新排列元素，所以它看起来就像一个表格——但是在这个过程中你有整个灵活性和元素将完全按照您的意愿行事。
我不能再强调使用div 而不是table 是多么容易。在努力让table 在今天的大部分时间里正确对齐之后，偶然发现了这个答案。使用div，我在几分钟内就完成了。

【解决方案2】：

这是因为您已经在表格中应用了width:100%，并且 td 或 th 将根据表格宽度决定它们的宽度。

为此，您必须从表中删除 width:100%，然后才能在 td/th 中应用 max-width 或 min-width

看到这个小提琴：https://jsfiddle.net/n7qmt8wt/3/

人们用于表格的另一个不错的选择是

table {
  width: 100%;
  table-layout: fixed;
}

table-layout CSS 属性定义了用于布局表格单元格、行和列的算法。

固定值：表格和列的宽度由 table 和 col 元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。

这完全取决于你是否会使用它，但这是保持100% 表宽且每个<td> 或<th> 大小相同的好方法。

【讨论】：

如果我删除 width:100% 那么我无法让我的桌子完全伸展。我不想放弃它。
我已经尝试过表格布局：已修复。但在我的情况下它不起作用。
请检查 width:100% 和 table-layout: fixed in jsfiddle
不，它不起作用。尝试在 jsFiddle 中调整输出大小，您可以看到按钮的宽度在增长
你理解table-layout 的含义吗？我只是给你这个选项，因为这将使所有单元格的宽度相等