表格列宽的 Blazor 渲染答案

【问题标题】：Blazor rendering of table column widths表格列宽的 Blazor 渲染
【发布时间】：2020-12-14 05:55:00
【问题描述】：

我有一个 Microsoft Blazor 项目。我正在尝试让 Razor 动态更改表格的列宽。我无法让它工作，所以我创建了这个非常精简的版本进行测试。以下代码创建两个表。在第一个中，没有 Razor 代码并且宽度正确呈现。在第二种情况下，宽度被忽略，即使它们是硬编码的。在非精简版本中，我使用 Razor 设置了列的可见性和标题的文本，它工作正常。它只是被忽略的宽度。

    <table>
        <thead class="thead-light">
            <tr>
                <th WIDTH="100">Column 1</th>
                <th WIDTH="200">Column 2</th>
            </tr>
        </thead>
    </table>
    <table>
        <thead>
            <tr>
                @foreach (var col in Columns)
                {
                    <th WIDTH="300">Column 1</th>
                }
            </tr>
        </thead>
        <tbody>
      ...

【问题讨论】：

宽度不会被忽略它是当有太多列显示时正常的浏览器解释。将列数减少到 2，你会得到差异。这不是特定于 blazor 的行为，您将使用 jquery 或 js 函数获得相同的行为。
我忘了说是因为每列的宽度相同
我明白你在说什么，但我需要一些方法来控制列的宽度，不管有多少列。整个表格不需要一次显示在屏幕上。用户可以滚动。事实上，这就是现在发生的事情。只显示表格的一部分，用户向右滚动以查看其余部分。尽管如此，浏览器还是会减小列宽。必须有某种方法来覆盖此行为。我尝试在封闭组件中的各种 div 上设置 width 属性，但没有效果。
overflow-x: auto on thead my be
实际上表格的设计目的是显示每一列，而不是滚动。或者用列宽之和设置表格宽度

标签： html razor blazor blazor-client-side

【解决方案1】：

我想我找到了解决办法。我没有使用文本作为表格标题，而是使用了边框设置为无且边距设置为 0 的按钮。看起来就像文本，但现在我可以通过设置按钮宽度来控制列宽。

【讨论】：