5

デフォルトでは、テーブルセル内（TCPDFによって生成されたテーブル内）の値は、セルの上部に垂直方向に配置されます。

テキストをセルの中央に垂直に配置する簡単な方法を見つけた人はいますか？

私はオンラインでいくつかの提案された解決策を見つけましたが、これらは私を理想的なものとは思いません。

たとえば、1つの提案（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>

＆nbsp;のフォントサイズを調整します テキストを上げたり下げたりする...それはハックですが、機能します。<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>

注：高さは行の高さの2倍にする必要があります。

  1. テーブルレベルでcellpadding属性を使用します。たとえば、

    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

フォントサイズが異なる1つの列を持つテーブルがあり（数値が大きく、小さくしないと1行に留まらないため）、クライアントはそれらをセルの垂直方向の中央に配置することを望んでいます。

HTML、CSS、TCPDFの歴史で学んだすべてのハックを試した後、私をあざけるたびに、予期していなかったような巧妙なソリューションを最終的に考案し、最終的にセルの垂直方向の配置を多かれ少なかれその場所に配置しました。セルの真ん中に。

同じセルに画像がある場合、TCPDFは画像の一番下の行にテキストを揃えることを発見しました。そこで、パラメータ化された幅と高さの白い画像を提供するユーティリティスクリプトを作成し、それをテキストの前に配置しました。必要な寸法の白い画像を作成して使用することもできますが、スクリプトとさまざまなパラメーターを試してみる方が簡単であることがわかりました。私の場合、幅は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％;"を追加します 画像タグで私のために働きます。これを試してみてください。私の場合、テーブルセルの画像を垂直方向に揃えたいと思いました。テーブルセルに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を追加し、それに高さ属性を追加します。これにより、垂直方向の間隔をきめ細かく制御できます。

次に例を示します。

'<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 に答える
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 に答える
-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 に答える