使用的DIV內表細胞

在this table，不僅僅是小區B的標題和內容，但也細胞A和C.使用的DIV內表細胞

enter image description here

我試圖設置標題和使用的DIV的內容只是部分成功。觀察到font-weight，但vertical-align不是。爲什麼？

CSS

<style type="text/css"> 
    td { 
     text-align: left; 
    } 
    .heading { 
     vertical-align: top; 
     font-weight: bold 
    } 
    .content { 
     vertical-align: middle; 
    } 
</style>

HTML

<table width="300px" height="300px" border="1"> 
    <tr> 
     <td rowspan="2">A</td> 
     <td> 
      <div class="heading">Heading of Cell B</div> 
      <div class="content">Content of Cell B</div> 
     </td> 
    </tr> 
    <tr> 
     <td>C</td> 
    </tr> 
</table>

來源

2013-12-10 Calaf

verticle對齊應該是中間 – ryan0319

表是對錶格數據並應正確使用，如果你不打算正確地佈局你的數據，那麼你不應該打擾他們 – Pete

verticle對齊應該是中間

verticle-align: middle;

這將放置在中間的文本。雖然你必須要知道這是把它放在上線（而不是容器）的中間，所以你需要一個行高

line-height: xxx;

或者使用div的和模仿表：http://jsfiddle.net/rf2kC/

來源

2013-12-10 16:36:03 ryan0319

我不想完全消除表。該表已經有一套複雜的colspan和rowspan屬性。爲每個單元格插入標題意味着維護表格將變得笨拙。因此，我試圖將某些部分設置爲單元格標題，將其他部分設置爲單元格內容，而不修改表格本身的結構。使用DIV或其他任何東西都可以。 – Calaf

垂直對齊將無法在線內顯示的元素上工作，如div。你可以把另一個表內的TD的，或者改變你的CSS是這樣的：

<style type="text/css"> 
    td { 
     text-align: left; 
    } 
    .heading { 
      position: relative; 
    top: 0; 
    background: blue; 
    height: 150px; 
    } 
    .content { 
     position: relative; 
    bottom: 0; 
    background: yellow; 
    height: 150px; 
    } 

</style>

來源

2013-12-10 18:36:45 user3037493

這裏有一些鏈接可以幫助你瞭解顯示選項：http://quirksmode.org/css/css2/display.html＆http://www.w3schools.com/cssref/pr_class_display.asp – user3037493

嘗試你所建議的http ：//jsfiddle.net/LSvmw/不會使內容居中。我錯過了什麼？ – Calaf

將「text-align：center;」添加到.heading和.content – user3037493

嘗試：

td { 
     text-align: left; 
     vertical-align:top; 

    } 

    .heading { 
     font-weight: bold; 
    } 
    .content { 
     margin: auto; 
     line-height: 200px; 
    }

http://jsfiddle.net/Xvx83/

來源

2013-12-10 19:41:38 abfurlan

如果我有實際的內容寫入單元格中，將line-height設置爲某個大值不會有幫助！ http://jsfiddle.net/9Qs5u/ – Calaf

使用的DIV內表細胞

回答

相關問題