2012-05-28 592 views
1

默認情況下,表格單元格內的值(由TCPDF生成的表格內)在單元格的頂部垂直對齊。PHP TCPDF - 如何垂直對齊表格單元格中的文本?

有沒有人找到一個簡單的方法來垂直對齊文本到單元格中間?

我在網上找到了一些建議的解決方案,但這些並沒有讓我理想。

例如,一個建議(http://sourceforge.net/projects/tcpdf/forums/forum/435311/topic/4385696)是使用TCPDF的MultiCell()方法設置每個單元格的內容,但這是一個當你僅僅想寫出你的HTML代碼然後生成PDF時就很痛苦。

另一個建議(http://bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells)是在每個單元格中放置跨度,並按順序在這些跨度中創建帶有換行符的空白行強制文本向下(並因此朝向垂直中心),但這有點破解。

有沒有人找到一個更好/更清潔的方式來實現這一目標?這個流行的圖書館肯定會滿足這樣一個共同的要求嗎?

+1

您是否嘗試過使用'valign'屬性附加傷害或CSS對細胞 – Musa

+0

部屋。我應該在上面的文字中提到過,但是,我嘗試了標準的HTML/CSS方法。 –

+0

有很多方法可以在CSS中實現這一點。你嘗試過所有的? –

回答

2

請記住,TCPDF無法像瀏覽器一樣處理成熟的HTML和CSS。 Nicolas在渲染使用最多的HTML代碼方面做得很好。 CSS不能放在文檔的頂部,它必須放在內部。

表格必須手動完全格式化 - 單元格不會自動調整它們在瀏覽器中的大小。同樣,你必須弄清楚事情有多高,如果你願意的話,可以添加<BR>或尺寸不可見的圖像。

也許有一天,他會添加更多的這種功能。事實上,我覺得這個班很棒。

5

下面的方法適用於我。 1.在表格標籤上面寫下面的代碼。

<style> td{height: 20px;line-height:10px;}</style> 

注意:高度應該是行高的兩倍。

  1. 在表級別使用cellpadding屬性。對於例如,

    的cellpadding = 「5」

在您需要調整高度左右逢源。也許具有較小線高度

+0

cellpadding =「5」的作品,我的例子中行高css不行... – Silvan

0

我想底部對齊一些 - 但不是全部 - 細胞。我發現只用<br>填充不起作用。

相反,您需要使用&nbsp;<br> - 然後將文本向下推。

-1

其工作(CELLPADDING)...

<table border="1" cellpadding="5" style="font-size:10px;"> 

$html .= '<table border="1" cellpadding="5" style="font-size:10px;">'; 
 
$html .= '<tr style="font-weight:bold;text-align:center;line-height:11px;" >'; 
 
$html .= '<th>School/College Name</th>'; 
 
$html .= '<th>Board</th>'; 
 
$html .= '<th>Language</th>'; 
 
$html .= '<th>Percentage</th>'; 
 
$html .= '<th>Place</th>'; 
 
$html .= '</tr>'; 
 
$html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >'; 
 
$html .= '<td style="vertical-align: middle;font-weight:bold;">' . $tenInfo[0]['school_college_name'] . '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $tenInfo[0]['board']. '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $tenInfo[0]['main_lang']. '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $tenInfo[0]['percentage']. '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $tenInfo[0]['school_college_place']. '</td>'; 
 
$html .= '</tr>'; 
 

 
$html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >'; 
 
$html .= '<td style="vertical-align: middle">' . $plusInfo[0]['school_college_name'] . '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $plusInfo[0]['board']. '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $plusInfo[0]['main_lang']. '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $plusInfo[0]['percentage']. '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $plusInfo[0]['school_college_place']. '</td>'; 
 
$html .= '</tr>'; 
 

 
$html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >'; 
 
$html .= '<td style="vertical-align: middle">' . $ugInfo[0]['school_college_name'] . '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $ugInfo[0]['board']. '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $ugInfo[0]['main_lang']. '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $ugInfo[0]['percentage']. '</td>'; 
 
$html .= '<td style="vertical-align: middle">' . $ugInfo[0]['school_college_place']. '</td>'; 
 
$html .= '</tr>'; 
 

 

 
$html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >'; 
 
$html .= '<td>' . $pgInfo[0]['school_college_name'] . '</td>'; 
 
$html .= '<td>' . $pgInfo[0]['board']. '</td>'; 
 
$html .= '<td>' . $pgInfo[0]['main_lang']. '</td>'; 
 
$html .= '<td>' . $pgInfo[0]['percentage']. '</td>'; 
 
$html .= '<td>' . $pgInfo[0]['school_college_place']. '</td>'; 
 
$html .= '</tr>'; 
 
$html .= '</table>';

+0

不行!...... –

1

我有一個具有不同的字體大小(導致數字大而不會一個列的表留在一條線上,如果沒有變小的話),客戶希望它們在單元中垂直居中。

在我嘗試了所有在我的HTML和CSS和TCPDF歷史中學到的所有嘲諷之後,每次嘲笑我時,我終於設計出了一個它沒有預料到的聰明解決方案,最後我得到了垂直單元格對齊或多或少進入這個地方,即在細胞中間。

我發現如果在同一個單元格中有圖像,TCPDF會將圖像底線上的文字對齊。所以我製作了一個實用程序腳本,用參數化寬度和高度的白色圖像爲我服務,並將其放在文本的前面。也可以製作一個想要的尺寸的白色圖像並使用它,但我發現使用腳本和不同的參數進行試驗更容易。在我的情況下,wwidth只有1px,但理論上也可以用圖像向右推文本。

當然,這種方法也存在一些問題,但在我的情況下,所有數字都表現得相當好。如果居中文本或其他列的高度變化很大,則很難找到一個很好的值(儘管可以通過參數設置來計算行中每個單元的長度所需的高度)。

我還是喜歡,如果有可能,至少是頂邊距或頂部利潤,人們可以設置進入細胞(工作垂直對齊會更可取的,但即使有任何工具將使生活更容易)

希望這有助於甚至一些其他貧困編碼

漢克

3

如果它是一個靜態表...你可以添加上面的內容隱形文字推文向下:

<td width="12%" style="text-align:center"> 
    <div style="font-size:10pt">&nbsp;</div> 
    <b>The contents of my cell...</b> 
</td> 

調整字體大小& nbsp;提高或降低文本...它是一個黑客,但它確實有效。 <的工作太...但他們會不太準確...

0

嵌套另一個TABLE並添加另一個行。在要垂直對齊的內容之前添加一個空TD,併爲其添加高度屬性。這應該使您能夠精確控制垂直間距。

下面是一個例子:

'<table cellpadding="0" border="0" style="border-collapse: collapse;">' . 
    '<tr>' . 
    '<td width="148" height="80">' . 
    '<img width="128" src="' . "images/gcs_logo.svg" . '"/>' . 
    '</td>' . 
    '<td style="line-height:14px; font-size:11px;">' . 
     '<table cellpadding="0" border="0" style="border-collapse: collapse;">' . 
     '<tr style="color:#000000;">' . 
     '<td height="23" style="text-decoration:underline;padding:0;"></td>' . 
     '</tr>' . 
     '<tr style="color:#000000;">' . 
     '<td style="padding:0;">18191 Von Karman Avenue<br/>Suite 300<br/>Irvine, California 92612</td>' . 
     '</tr>' . 
     '</table>' . 
    '</td>' . 
    '</tr>' . 
    '</table>'; 
0

使用內嵌樣式爲<td>標籤,然後改變百分比設置文本你想要的PDF顯示效果上的適當位置。 e。摹

<td style="line-height: 250%;">'. $variable .'</td> 
0

可以使用&nbsp;<br/>

,我發現這個link也許可以幫助你

0

添加樣式到您的<td>表中添加空間= 「行高:50%;」在圖像標籤爲我工作。請嘗試一下。在我的情況下,我想垂直對齊表格單元格中的圖像。您可以在表格單元格中添加div,並可以在其中添加圖像或文本。下面爲我​​工作。

<div align="center"><img src="images/logo_example.png" border="0" height="30" width="30" style="line-height:50%;"/></div>

相關問題