Question

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

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

Table

在最底层，实际上这也是表的结尾，但是同一个表中的两行Sign in here仍然是一行。正如你所看到的那样，左边的空间比右边空间少得多。在开始时我使用不同的表来管理这种东西，但我真的想把所有东西保存在一个表中，只需在必要时调整当前行的单元格宽度。我可以确定这一行，我可以附加一些类，我只是不知道用什么CSS来使每个单元格占用相同的空间（当然可以这样做）

P.S

抱歉，这是我在视图中用来呈现此行的代码（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％（而其他行的单元格 - 使用这些单元格的单元格不是等宽度），最好的办法是注入额外的单元格table（在父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>

从HTML表格中设置单行样式

1 个答案: