从HTML表格造型单行

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

当我在一行上有两列时，我希望每列都占整行宽度的50％。为了让自己更清楚，这里是我现在看到：

Table

在最底层，其实这也是表的末尾，但仍从同一个表中的两个字符串Sign in here一行。正如你所看到的那样，左边的一个比另一个占用的空间少很多。在开始时，我使用不同的表来管理这种东西，但我真的想把所有东西放在一张表中，并在必要时调整当前行的单元格宽度。我可以确定这一行，我可以给它添加一些类，我只是不知道用什么CSS来使每个单元格占据相同的空间（并且当然可以完成此操作）

对不起，这是代码（剃刀），我在我看来，用它来渲染该行：

<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>

来源

2013-05-13 Leron

为最后TR> TD与'合并单元格=” 4“'然后用两个td's创建一个表格，每个'width：50％'，这样它们就不会受到其他行/列的影响 – RaphaelDDL 2013-05-13 12:39:11

那么，这和我写的是什么很大的区别是在做之前（创建新表来处理这种情况？） – Leron 2013-05-13 12:41:57

无需任何额外的款式，HTML表将构建它的单元格宽度尽量可能容纳整个列中的数据。没有任何方式可以将单元格的宽度设计为从一行到另一行。因此，如果你想让两个单元格每个单元精确地落入50％（而其他行的单元格 - 这些单元格的使用位置不是等宽），那么最好的方法是注入一个额外的表格（在任何父族的范围内）有一行两列，每列设置为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>

来源

2013-05-13 12:43:51 johnkavanagh

如果你想得到我的评论和发布作为答案，至少要复制它：它是colspan 4，而不是2，因为他的表有4列。 – RaphaelDDL 2013-05-13 13:00:34

从HTML表格造型单行

回答

相关问题