用表格創建與divs相同的東西

我開始更深入地研究CSS，並決定將我的網站的html主要由表格組成的div轉換爲div。用表格創建與divs相同的東西

我試圖用div來完成同樣的事情，就像在這個測試頁上的表一樣。但我有一些問題：

無法使列
垂直文本對齊

我已經得到了多遠： table vs div

代碼：

<style type="text/css"> 


body { 
background-color:#000; 
} 


/* TABLE CSS */ 
td { 
    font-family: Tahoma; 
    font-size: 12px; 

} 
.line { 
    border-collapse:separate; 
    border:1px solid #222222; 
    border-spacing:1px 1px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color: #000000; 
    padding: 1px; 
    width:400px; 

} 
.topic { 
    background-color:#3C0; 
    font-weight: bold; 
    height: 23px; 
    color:#FFF; 
    text-align:center; 
} 
.row { 
    background-color: #111111; 

    border-bottom: 1px solid black; 
    color: #ffffff; 
    height:12px; 
    line-height:21px; 
    padding:0px; 
} 
.row:Hover { 
    background-color: #252525; 
} 

/* DIV CSS */ 
div.line { 
    border-collapse:separate; 
    border:1px solid #222222; 
    border-spacing:1px 1px; 
    align:center; 
    background-color: #000000; 
    padding: 1px; 
    width:400px; 

} 
div.topic { 
    background-color:#3C0; 
    font-family: Tahoma; 
    font-size: 12px; 
    height: 23px; 
    font-color:#FFF; 
    text-align:center; 

} 
div.row { 
    background-color: #111111; 
    border-bottom: 1px solid black; 
    color: #ffffff; 
    padding:6px; 
    font-family: Tahoma; 
    font-size:12px; 

} 

div.row:Hover { 
    background-color: #252525; 
} 

</style> 
<body> 


<table class="line"> 
    <tbody> 
    <tr> 
     <td class="topic" colspan="3">Table</td> 
    </tr> 
    <tr class="row"> 
     <td width="20%" align="left">Test</td> 
     <td width="20%" align="center">1</td> 
    </tr> 
    <tr class="row"> 
     <td align="left">Test</td> 
     <td align="center">2</td> 
    </tr> 
    </tbody> 
</table> 
<p> 
<div class="line"> 
<div class="topic">Div</div> 
<div class="row">Test</div><div class="row">1</div> 
<div class="row">Test</div><div class="row">2</div> 
</div> 
</p>

來源

2011-10-28 domino

你到底想達到什麼目的？有可能表格比div更好（例如表格數據的表示）。 –

@Truth我聽說如果我只使用表格或div，而不是兩者都會更好。目前我的佈局使用表格來處理所有事情。我試圖將整個事情轉換爲div和css。 – domino

寬度是否固定？ –

在這裏你去：

HTML：

<div id="wrap"> 
    <h2> Div </h2> 
    <div class="section"> 
     <div> Test </div> 
     <div> 1 </div> 
    </div> 
    <div class="section"> 
     <div> Test </div> 
     <div> 2 </div> 
    </div> 
</div>

CSS：

#wrap { 
    border: 2px solid #333; 
    padding: 2px; 
} 

h2 { 
    background: green; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
    padding: 4px 0; 
} 

.section { 
    overflow: auto; 
    margin-top: 2px; 
} 

.section > div { 
    float:left; 
    width: 50%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    background-color: #333; 
    color: white; 
    padding: 4px 0; 
} 

.section > div + div { 
    text-align: center; 
    border-left: 2px solid black; 
}

現場演示：http://jsfiddle.net/jNQrM/1/

來源

2011-10-28 12:45:41

謝謝，這解釋了很多。 section> div + div - 從來沒有在css文件中看到類似的東西。你能告訴我那是什麼，我可以查看它嗎？ – domino

@domino'X> Y'是[子組合選擇器]（http://www.w3.org/TR/css3-selectors/#child-combinators）。 'X + Y'是[鄰接兄弟組合選擇符]（http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators）。選擇器'.section> div + div'匹配所有DIV元素，父元素具有類「section」，而前一個元素也是DIV元素。實際上，我選擇了'.section'內的所有DIV，它們不是第一個孩子，ergo，第二個DIV，第三個DIV等。（在你的情況下，每個'.section'只包含兩個DIV，所以只有第二個匹配。） –

放浮標：左;這個類： div.row

來源

2011-10-28 12:26:19 GregM

獲取一本好書 - 我建議CSS：失蹤手冊（缺少手冊）
查找float長着display ESP relative

來源

2011-10-28 12:27:34

看看CSS顯示屬性。

.line { 
display: table; 
} 

.row { 
display: table-cell; 
}

但是，你應該得到一些與Internet Explorer的問題。在這種情況下，你可以使用display：inline;縮放：1;

來源

2011-10-28 12:31:14 dkg

很高興看到您將table s轉換爲div s，但請確保您只在必要時執行此操作。

如果頁面上的數據是表格，那麼將它放在table元素中是有意義的。

Div是用於佈局和結構，table用於顯示錶格數據。

我的一個同事曾經花了幾年的時間在一個表格結構之外建立一個論壇。這完全是因爲他被告知「表格不好，使用div和CSS」。重要的是要記住這只是指佈局結構。

如果您的結構具有行和列，則使用表格。表格仍然是有效的HTML元素，遠不被棄用。

來源

2011-10-28 12:36:12 Curt

謝謝，我的印象是，他們不應該混合，只有一個應該使用。 – domino

@domino - Nope，使用HTML表格顯示數據沒有任何問題，它絕對比使用div更好。它的可訪問性也更好。 – Curt

用表格創建與divs相同的東西

回答

相關問題