PHP TCPDF - 如何垂直對齊表格單元格中的文本？

Question

默認情況下，表格單元格中的值（在由 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）是在每個單元格內放置跨度並在這些跨度中創建帶有換行符的空行，以強制您的文本向下（因此朝向垂直中心），但這有點麻煩。

有沒有人找到更好/更清潔的方法來實現這一目標？ 這么受歡迎的圖書館肯定會滿足這種常見的需求嗎？

Answer 1

如果它是一個靜態表格...您可以在內容上方添加不可見文本以將文本向下推：

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

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

Answer 2

請記住，TCPDF 無法像瀏覽器那樣處理完整的 HTML 和 CSS。 Nicolas 在渲染最常用的 HTML 代碼方面做得很好。 CSS 不能放在文檔的頂部，它必須放在內聯。

表格必須完全手動格式化——單元格不會像在瀏覽器中那樣自動調整大小。 同樣，您必須弄清楚某物有多高，然后添加<BR>或調整一個不可見圖像的大小以根據需要將其向下推。

也許有一天他會添加更多這種功能。 事實上，我覺得這門課很棒。

Answer 3

以下方法對我有用。 1.在表格標簽上方編寫以下代碼。

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

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

1. 在表級別使用 cellpadding 屬性。 例如，

   單元格填充=“5”

在這兩種方式中，您都需要調整高度。

Answer 4

這對我有用：

<td align="center" style="height: 50px;">
<div style="vertical-align: middle;">
<p>This Is My text</p>
</div>
</td>

Answer 5

我想底部對齊一些 - 但不是全部 - 單元格。 我發現簡單地用<br>填充是行不通的。

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

Answer 6

我有一個表格，其中一列具有不同的字體大小（因為數字很大，如果不縮小就不會停留在一行上）並且客戶希望它們在單元格中垂直居中。

在嘗試了我在 HTML、CSS 和 TCPDF 的歷史中每次嘲笑我時學到的所有技巧之后，我終於設計了一個它沒有預料到的聰明的解決方案，最后我或多或少地獲得了垂直單元格對齊的位置，即在單元格的中間。

我發現如果同一個單元格中有圖像，TCPDF 會對齊圖像底線的文本。 所以我制作了一個實用程序腳本來為我提供一個參數化寬度和高度的白色圖像，並將其放在文本前面。 也可以只制作所需尺寸的白色圖像並使用它，但我發現用腳本和不同的參數進行試驗更容易。 就我而言，wwidth 僅為 1px，但理論上也可以將文本與圖像一起推到右側。

當然，這種方法也存在一些問題，但就我而言，所有數字都表現得很好。 如果居中文本或其他列的高度變化很大，則很難找到一個好的值（盡管通過參數化可以嘗試根據行上每個單元格的長度計算所需的高度）。

我仍然希望至少可以在單元格中設置頂部填充或頂部邊距（使用垂直對齊會更可取，但即使使用任何工具也會使生活更輕松）

希望這甚至可以幫助其他一些糟糕的編碼員

漢克

Answer 7

對<td>標簽使用內聯樣式，然后改變百分比以將文本設置在 pdf 顯示上所需的合適位置。 例如

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

Answer 8

添加樣式="線高:50%;" 在圖像標簽中對我有用。 請試一試。 就我而言，我想在表格單元格中垂直對齊圖像。 您可以在表格單元格中添加 div 並可以在其中添加圖像或文本。 下面對我有用。

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

Answer 9

也許行高較小，這是一種解決方法：

<table width="100%" cellpadding="5" cellspacing="0">

cellpadding 值是單元格高度 / 2 。 如果您需要更多空間/高度，看起來不太好，否則這將是更好的解決方案： http : //bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells

Answer 10

嵌套另一個 TABLE 並添加另一個 ROW。 在要垂直對齊的內容之前添加一個空的 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>';

Answer 11

您可以使用&nbsp;<br/>為<td>表添加空間

我發現這個鏈接也許可以幫助你

Answer 12

我用 span 標簽內的一個字母解決了它； 例如：

<td><span style=\"font-size:16px;color:#FFF;\">|</span>Content</td>

通過調整字體大小，我可以處理單元格的高度，因為文本始終是基線，所以它可以工作。

Answer 13

它的工作（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>';