html - 设置 HTML 表格中单行的样式

Question

我正在开发一个 asp.net mvc 3 应用程序。我正在使用表显示数据库中的数据。基本上，该表有 4 列，但在某些情况下，整行可能有 2 甚至 1 列。通过使用 if 语句，我可以捕获这些情况并正确管理它们(使用 colspan 更具体)，因此我可以保持表的结构干净。然而，我真的很想用一些 CSS 来改变(如果可能的话)一个默认行为。

当我一行中有两列时，我希望每列恰好占据该行整个宽度的 50%。为了让自己更清楚，这是我现在看到的:

在最底部，实际上这也是表格的末尾，但仍然是同一个表格的一行，两个字符串在此处登录。正如您所看到的，左边的空间比右边的空间小很多。一开始，我使用不同的表来管理此类内容，但我真的希望将所有内容保留在一个表中，并在必要时调整当前行上单元格的宽度。我可以确定这一行，我可以向它附加一些类，我只是不知道使用什么CSS来使每个单元格占据相同的空间(当然是否可以做到这一点)

附注

抱歉，这是我在 View 中用来渲染此行的代码(Razor):

<tr>          
        @if (!string.IsNullOrEmpty(Model[0][0].FieldValue))
        { 
            <td colspan="2">
            @Html.DisplayFor(x => x[0][0].FieldValue)
            </td>
        }
        else
        { 
            <td colspan="2">
            Sign in here
            </td>
        }         

        @if (!string.IsNullOrEmpty(Model[1][0].FieldValue))
        { 
            <td colspan="2">
            @Html.DisplayFor(x => x[1][0].FieldValue)
            </td>
        }
        else
        { 
            <td colspan="2">
            Sign in here
            </td>
        }        

</tr>

Answer 1

在没有任何附加样式的情况下，HTML 表格将尽可能构造其单元格宽度以容纳整个列中的数据。没有任何方法可以专门设置从一行到下一行的单元格宽度样式。

因此，如果您想让两个单元格各下降 50%(而其他行的单元格(使用这些单元格的地方)宽度不相等)，那么最好的选择是注入(inject)一个额外的表(无论父 colspan 是什么)，具有一行、两列，每列设置为 50% 宽度。

我确信您可以将其提取到当前逻辑(以及外部 CSS 文件)中，但生成的标记将类似于:

<td colspan="x">
    <table>
        <tr>
            <td style="width:50%">cell content here</td>
            <td style="width:50%">cell content here</td>
        </tr>
    </table>
</td>