带有4列的HTML表，3个固定的列为宽度的其余部分

Question

我有一个HTML表格，它构成了移动布局中标题的一部分。 我这里有一个JSFIDDLE

<table class="icon-buttons">
    <tr>
        <td class="header-desc">
            Tasks
        </td>
        <td class="header-icon-close">
            <i class="ion-ios-close ion-fw"></i>
        </td>
        <td class="header-icon-edit">
            <i class="ion-edit ion-fw"></i>
        </td>
        <td class="header-icon-delete">
            <i class="ion-close ion-fw"></i>
        </td>
    </tr>
</table>

最后三列的固定宽度为32px，我希望它们向右浮动。 我希望第一列占用剩余的可用空间，如下所示：

|                                                 |
| Tasks                                  C  E  D  | 
|                                                 |

我的最后3列CSS是：

.header-icon-close,
.header-icon-edit,
.header-icon-delete {
  width: 32px;
  vertical-align: top;
}

我试过给第一列宽度作为屏幕尺寸的％，但这不允许最后三列保持固定。 我也试过漂浮过去的三个权利，但这不起作用。

是否有一种简单的CSS方法可以使第一列占用“剩余的可用宽度而不是更多”，以防其内容太大，第一列/单元格应该包装而不会影响最后三列。

|                                                 |
| Tasks Tasks Tasks Tasks Tasks Tasks    C  E  D  | 
| Tasks Tasks Tasks Tasks Tasks Tasks             |
|                                                 |

Answer 1

只需将width: 100%添加到表的类中，然后删除第一列的宽度

.icon-buttons{
    width: 100%;
}

例