表格表示爲Divs不顯示

我是網絡編程的新手，我正在研究的網頁的第一稿中有一張表格。當我做了更多的閱讀時，我發現將外部表格作爲div渲染並將表格嵌套到外部div的單元格中會更好。然而，只要我切換我的表格標籤div divs停止顯示。我確定我錯過了一些明顯的東西。下面是代碼：表格表示爲Divs不顯示

CSS：

.Dashboard 
{ 
    display: table; 
    table-layout: fixed; 
    height: 500px; 
    width: 500px; 
} 
.col 
{ 
    display: table-column; 
} 
.cell1 
{ 
    display: table-cell; 
    border: 1px solid black; 
} 
.cell2 
{ 
    display: table-cell; 
    border: 1px solid black; 
} 
.cell3 
{ 
    display: table-cell; 
    border: 1px solid black; 
} 
.cell4 
{ 
    display: table-cell; 
    border: 1px solid black; 
} 
table.inner, td 
{ 
    border-collapse: collapse; 
    border: 2px solid black; 
    text-align: center; 
    padding: 2px; 
} 
td.image 
{ 
    padding: 0; 
    margin: 0; 
}

HTML：

<form id="form1" runat="server"> 
<asp:Label runat="server" ID="label"></asp:Label> 
<div runat="server" id="Dashboard" class="Dashboard"> 
    <div class="col"> 
     <div class="cell1"> 
      <table class="inner" id="t1"> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr><...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
      </table> 
     </div> 
     <div class="cell2"> 
      <table class="inner" id="t2"> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
      </table> 
     </div> 
    </div> 
    <div class="col"> 
     <div class="cell3"> 
      <table class="inner" id="t3"> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
       <tr>...</tr> 
      </table> 
     </div> 
     <div class="cell4"> 
      <table class="inner" id="t4"> 
       <tr>...</tr> 
      </table> 
     </div> 
    </div> 
</div> 
</form> 
</body> 
</html>

我實現所有的細胞都是一樣的時刻，但會改變 - 因此，四個不同的CSS規範。

任何意見表示讚賞。

問候。

來源

2012-06-18 Kevin

不要將div和表格放在表單中！ – poepje

從您的代碼

唯一的錯誤是，你正在使用顯示：表列爲.COL，請嘗試刪除或將其更改爲表單元格或錶行和你的代碼應該工作。

來源

2012-06-18 14:03:53

好吧，你說得對，這使得桌子重新出現 - 全都混亂起來。但屬性表列在Visual Web Developer提供的代碼完成中絕對可用。 – Kevin

「table-column」顯示類型意味着它的作用類似於HTML中的標籤 - 即一個不可見的元素，其寬度*控制封閉表的相應物理列的寬度。有關CSS表模型的更多信息，請參見[W3C標準]（http://www.w3.org/TR/CSS21/tables.html）。另請參閱http://stackoverflow.com/questions/7617418/how-is-a-css-display-table-column-supposed-to-work –

請參閱此處使用不同顯示類型的嵌套div的示例：http：/ /www.quirksmode.org/css/display.html @AnnB。你是正確的，它不顯示任何東西，只用於像''這樣的造型信息。 –

好的做法是使用table less HTML進行標記，除非您實際上有要顯示的表格數據。表格適用於Tabular data！但是，在你的情況下，問題是與display: CSS屬性。如果你把display：block;而不是table-cell等，佈局開始出現在您的網頁上。所以我想在具有看看W3schools建議

來源

2012-06-18 13:47:13 Chin

謝謝。表格真的是表格數據，所以我需要它們。但他們都是不同的大小，所以他們沒有很好地包裹在外表。順便說一句，改變表格到塊沒有使表格重新出現。 – Kevin

W3schools => http://w3fools.com/ –

@Diodeus認真嗎？ W3Schools有什麼問題？ – poepje

表格表示爲Divs不顯示

回答

相關問題