样式化 HTML 表格中的单行

Question

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

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

在最底部，实际上这也是表格的末尾，但仍然是同一表格中的一行，两个字符串Sign in here。如您所见，左边的空间比右边的要少得多。一开始我使用不同的表来管理这类东西，但我真的想把所有东西都放在一个表中，并在必要时调整当前行上单元格的宽度。我可以确定这一行，我可以附加一些类，我只是不知道用什么 CSS 让每个单元格占据相同的空间（当然有可能这样做）

附言

抱歉，这是我在视图中用来呈现该行的代码（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%（而其他行的单元格 - 使用这些单元格的地方 - 不等宽），最好的办法是注入一个额外的表（无论父 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>