html - 如何使用敲除动态设置和修复 html5 表列大小

Question

我有这样的表：

<table class="table table-bordered">
    <tbody data-bind="foreach: { data: dataset, as: 'rowInfo' }">
        <tr style="max-height: 30px" 
            data-bind="foreach: { data: $parent.metadata, as: 'colInfo' }">
            <td style="max-height: 30px" data-bind="text: rowInfo[colInfo.DataColumn],
                attr: {width: Width}"></td>
        </tr>
    </tbody>
</table>

我想有类似网格的体验。所以我不希望文本在单元格中换行或使单元格调整大小。我想要固定大小的单元格，它们的height设置30px和来自淘汰赛的width设置。colInfo.Width

但是使用上面的代码，单元格会重新调整大小以适应它们的内容。我应该如何将属性设置为固定height和width？

Answer 1

要max-height为单元格内容提供 a ，您需要将其包装在另一个元素中（例如 a div）。此外，我建议使用style绑定，如下所示：

        <td>
        <div data-bind="text: rowInfo[colInfo.DataColumn],
            style: { width: Width, height: '30px' }"></div>
        </td>

请参阅此小提琴以获取工作演示。