5

默认情况下，表格单元格中的值（在由 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）是在每个单元格中放置跨度并在这些跨度中创建带有换行符的空行，以强制您的文本向下（因此朝向垂直中心），但这有点小题大做。

有没有人找到更好/更清洁的方法来实现这一目标？这么受欢迎的图书馆肯定会满足如此普遍的需求吗？

4

13 回答 13

12

如果它是静态表格...您可以在内容上方添加不可见的文本以将文本下推：

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

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

于 2016-04-15T15:14:42.380 回答
10

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

表格必须完全手动格式化——单元格不会像在浏览器中那样自动调整大小。同样，您必须弄清楚某物的高度，并添加<BR>s 或调整不可见图像的大小以将其向下推。

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

于 2012-06-20T11:30:18.437 回答
6

以下方法对我有用。1. 在表格标签上方编写以下代码。

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

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

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

    单元格填充=“5”

在这两种方式中，您都需要调整高度。

于 2013-01-08T12:40:45.390 回答
6

这对我有用：

<td align="center" style="height: 50px;">
<div style="vertical-align: middle;">
<p>This Is My text</p>
</div>
</td>
于 2019-12-31T06:56:16.860 回答
2

我想底部对齐一些 - 但不是全部 - 单元格。我发现简单地填充<br>不起作用。

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

于 2014-09-17T12:17:04.510 回答
1

我有一个表格，其中一列的字体大小不同（因为数字很大，如果不缩小就不会留在一行上），客户希望它们在单元格中垂直居中。

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

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

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

我仍然希望至少可以在单元格中设置顶部填充或顶部边距（工作垂直对齐会更可取，但即使有任何工具也会让生活更轻松）

希望这甚至可以帮助其他一些糟糕的编码器

汉克

于 2016-03-14T09:56:44.240 回答
1

对标签使用内联样式<td>，然后改变百分比以将文本设置在 pdf 显示中所需的合适位置。例如 

<td style="line-height: 250%;">'. $variable .'</td>
于 2017-06-11T21:10:13.657 回答
1

添加 style="line-height:50%;" in image 标签对我有用。请试一试。就我而言，我想在表格单元格中垂直对齐图像。您可以在表格单元格中添加 div，并可以在其中添加图像或文本。下面对我有用。

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

于 2017-09-06T07:55:13.187 回答
0

也许对于较小的行高，这是一种解决方法：

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

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

于 2014-05-15T18:58:49.560 回答
0

您可以<td>使用为表格添加空间&nbsp;<br/>

我发现这个链接也许可以帮助你

于 2017-06-17T13:36:51.710 回答
0

我用跨度标签内的一个字母解决了它；例如：

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

通过调整字体大小，我可以处理单元格的高度，并且因为文本始终是基线，所以它可以工作。

于 2019-07-11T19:11:51.997 回答
0

嵌套另一个 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>';
于 2017-01-27T09:33:33.460 回答
-3

它的工作（细胞填充）...

<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>';

于 2015-10-29T05:36:34.623 回答