在td中100％的高度，將文本放置在垂直中間

Question

我目前使用EvoPDF（HTML to PDF）在C＃中生成報告。

在這份報告中，我們有一個表，看起來像這樣的小提琴：

http://jsfiddle.net/bk48srw1/3/

與重要的部分：

<tr> 
    <td>label for something</td> 
    <td style="position:relative;" rowspan="99999"> 
    <div id="absolute"> 
     <div class="centerd"> 
     <span>value for all</span> 
     </div> 
    </div>  
    </td> 
</tr> 

的想法是，有各種各樣的產品，但它們在第二列具有相同的值，因此：

rowspan="99999" 

客戶希望樣式（邊框和背景）跨越第二列的高度，文字位於中間。我已經嘗試了絕對位置，顯示：表格以及垂直對齊。

，因爲我不知道的高度會是什麼，我不能使用像Vertically align text in a span with fixed width and height 溶液（有可能是TR的任意數量）

如何使TD的分度100％的高度，與文字顯示在中間？

我的首選是不使用JS，看到這段代碼根本沒有看到瀏覽器。

爲了造型的目的，我需要在td和div之間有大約3px的填充，看到我不能將cellspacing添加到只有1個td。

Answer 1

習慣這種改變你的HTML作爲這樣

td{ 
 
    width:50%;vertical-align:middle; 
 
}

<table style="width:100% "> 
 

 

 
<tr> 
 
    <td> 
 
     <table> 
 
     <tr><td>label for something</td></tr> 
 
     <tr> 
 
    <td>label for this:</td> 
 
    
 
</tr> 
 
<tr> 
 
<td>label for this:</td> 
 

 
</tr> 
 
<tr> 
 
<td>label for this:</td> 
 

 
</tr> 
 
<tr> 
 
<td>label for this:</td> 
 

 
</tr> 
 
     </table> 
 
    </td> 
 
    <td style="background:yellow; border: 1px solid black;text-align:center;"> 
 
    <table width="100%"> 
 
    <tr><td>value for all</td></tr> 
 
    </table> 
 
     
 
    </td> 
 
</tr> 
 

 
</table>

Answer 2

在這裏你去：http://jsfiddle.net/sjncndvn/2/

HTML標記：

<table style="width:100% "> 
<tr> 
    <td>label for something</td> 
    <td style="position:relative;" rowspan="99999"> 
    <div id="absolute"> 
     <div class="centerd"> 
     <span>value for all</span> 
     </div> 
    </div>  
    </td> 
</tr> 
<tr> 
    <td>label for this:</td> 
    <td></td> 
</tr> 
<tr> 
<td>label for this:</td> 
<td></td> 
</tr> 
<tr> 
<td>label for this:</td> 
<td></td> 
</tr> 
<tr> 
<td>label for this:</td> 
<td></td> 
</tr> 
</table> 

CSS：

td{ 
    width:50%; 
    display:table-cell ; 
    vertical-align:middle ; 
} 
#absolute { 
    width:100%; 
    background:yellow; 
    display:table; 
    border: 1px solid black; 
} 

.centerd { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
background-color:#pink; 
} 

由於#absolute不再使用絕對定位，因此您可能需要將ID名稱更改爲其他名稱。