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

请记住，TCPDF无法像浏览器一样处理成熟的HTML和CSS。 Nicolas在渲染使用最多的HTML代码方面做得很好。 CSS不能放在文档的顶部，它必须放在内部。

表格必须手动完全格式化 - 单元格不会自动调整它们在浏览器中的大小。同样，你必须弄清楚事情有多高，如果你愿意的话，可以添加<BR>或尺寸不可见的图像。

也许有一天，他会添加更多的这种功能。事实上，我觉得这个班很棒。

Answer 2

下面的方法适用于我。 1.在表格标签上面写下面的代码。

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

注意：高度应该是行高的两倍。

1. 在表级别使用cellpadding属性。对于例如，

   的cellpadding = “5”

在您需要调整高度左右逢源。也许具有较小线高度

Answer 3

这是一种解决方法：

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

CELLPADDING值是单元高度/ 2。如果你需要更多的空间/高度不好看 否则这将是更好的解决方案：http://bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells

Answer 4

我想底部对齐一些 - 但不是全部 - 细胞。我发现只用<br>填充不起作用。

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

Answer 5

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

Answer 6

我有一个具有不同的字体大小（导致数字大而不会一个列的表留在一条线上，如果没有变小的话），客户希望它们在单元中垂直居中。

在我尝试了所有在我的HTML和CSS和TCPDF历史中学到的所有嘲讽之后，每次嘲笑我时，我终于设计出了一个它没有预料到的聪明解决方案，最后我得到了垂直单元格对齐或多或少进入这个地方，即在细胞中间。

我发现如果在同一个单元格中有图像，TCPDF会将图像底线上的文字对齐。所以我制作了一个实用程序脚本，用参数化宽度和高度的白色图像为我服务，并将其放在文本的前面。也可以制作一个想要的尺寸的白色图像并使用它，但我发现使用脚本和不同的参数进行试验更容易。在我的情况下，wwidth只有1px，但理论上也可以用图像向右推文本。

当然，这种方法也存在一些问题，但在我的情况下，所有数字都表现得相当好。如果居中文本或其他列的高度变化很大，则很难找到一个很好的值（尽管可以通过参数设置来计算行中每个单元的长度所需的高度）。

我还是喜欢，如果有可能，至少是顶边距或顶部利润，人们可以设置进入细胞（工作垂直对齐会更可取的，但即使有任何工具将使生活更容易）

希望这有助于甚至一些其他贫困编码

汉克

Answer 7

如果它是一个静态表...你可以添加上面的内容隐形文字推文向下：

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

调整字体大小& nbsp;提高或降低文本...它是一个黑客，但它确实有效。 <的工作太...但他们会不太准确...

Answer 8

嵌套另一个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>'; 

Answer 9

使用内嵌样式为<td>标签，然后改变百分比设置文本你想要的PDF显示效果上的适当位置。 e。摹

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

Answer 10

可以使用&nbsp;<br/>

，我发现这个link也许可以帮助你

Answer 11

添加样式到您的<td>表中添加空间= “行高：50％;”在图像标签为我工作。请尝试一下。在我的情况下，我想垂直对齐表格单元格中的图像。您可以在表格单元格中添加div，并可以在其中添加图像或文本。下面为我​​工作。

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