Rowspans和垂直對齊頂部和中心在CSS表

Question

我已經做了很多關於CSS表的研究，並用CSS創建了類似於rowspan的效果，雖然我知道這是可能的，但我迄今爲止沒有發現演示如何實現我在尋找的東西。我只想知道，如果不使用傳統表格，或者需要使用Javascript實現（我希望避免這種情況），我的特定配置是否可以單獨使用CSS。

我想要兩列：左列有一行，跨越表的整個高度，其內容是垂直居中，右列有兩行 - 最上面一行是短的，垂直對齊頂部和底部的行將會很長並且具有與中心垂直對齊的內容。左列/行將包含大量內容，拉伸最右邊的列並使右列中的第二行居中成爲可能。

我還要指出，我不是那些不合理地害怕使用傳統表格的人，即使這看起來是這樣。不幸的是，我的項目爲其他原因調用CSS表。

下面是使用表格示例的鏈接，演示了我期望實現的目標，以及迄今爲止提出的有缺陷的CSS表格。關鍵是垂直對齊右側列上的兩行 - 目前標題通過Javascript與頂部對齊，但我想知道是否有辦法使用CSS表格（並且不使用絕對路徑定位，因爲我想標題的高度影響下面的行）。右列底行內容的高度將是可變和未確定的。

目標：

http://jsfiddle.net/VCGAK/4/

這是我想出了：

http://jsfiddle.net/5mvrg/

CSS：

#thetable { 
    display:table; 
    width:100%; 
} 
#tablerow { 
    display:table-row; 
} 
#main-content { 
    border:1px solid #000; 
    width: 40%; 
    left:0; 
    position:relative; 
    display: table-cell; 
    vertical-align:middle; 
    padding-right:25px; 
    z-index:1000; 
    text-align:center; 
} 
#titlediv { 
    border:1px solid #000; 
} 
#main-sidebar { 
    border:1px solid #000; 
    width: 60%; 
    vertical-align:middle; 
    display: table-cell; 
    height: 100%; 
    position:relative; 
    padding-right: 15px; 
    margin:0px auto; 
    z-index:1000; 
} 

HTML：

<div id="thetable"> 
    <div id="tablerow"> 
     <div id="main-content" <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
     </div> 
     <div id="main-sidebar"> 
      <div id="titlediv">Title is currently aligned to top via Javascript</div>Lots o' Details 
      <br> 
      <hr>Lots o' Details 
      <br> 
      <hr>Lots o' Details 
      <br> 
      <hr> 
     </div> 
    </div> 

雖然this answer有助於演示如何實現rowspans，但我無法調整它以使此類垂直對齊工作成爲可能。任何幫助將不勝感激。

Answer 1

好了，現在明白了：

HTML代碼：

<div id="thetable"> 
    <div id="tablerow"> 
     <div id="main-content" <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
      <p>LALALALALA</p> 
     </div> 
     <div id="main-sidebar"> 
      <div id="titlediv">Title is currently aligned to top via Javascript</div> 
      <div id="contentdiv"> 
      Lots o' Details 
      <br> 
      <hr>Lots o' Details 
      <br> 
      <hr>Lots o' Details 
      <br> 
      <hr> 
      </div> 
     </div> 
    </div> 

CSS代碼：

body, td, th { 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 24px; 
} 
body { 
    background-color:#652739; 
    color:#CCC; 
} 
#thetable { 
    width:90%; 
    max-width:1180px; 
    min-width:750px; 
    position:relative; 
    margin:0px auto; 
} 
#thetable, #thetable tr td { 
    border:1px solid #000; 
} 
#leftcell { 
    width:40%; 
    text-align:center; 
} 
#titlecell { 
    padding-left:50px; 
    width:60%; 
    vertical-align:top; 
    height:200px; 
} 
#detailscell { 
    padding-left:80px; 
    width:60%; 
    padding-right:15px; 
    vertical-align:middle; 
    height:300px; 
} 

我更新烏爾jsfiddle太...

希望可以幫助。