從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表格造型單行

回答

相關問題