简体   繁体   English

如何使右边框表tcpdf更小?

[英]How to make right border table tcpdf smaller?

I try to create tcpdf using writeHTML like this $pdf->writeHTML($html, true, 0, false, 0);我尝试使用创建TCPDF writeHTML这样$pdf->writeHTML($html, true, 0, false, 0); which $html value like code below哪个$html值像下面的代码

<table border="1">
        <tr>
          <td width="100%" colspan="4">
            <table border="0">
               <tr>
                 <td width="18%" style="border-right:0.01px">Test 1</td>
                 <td width="12%">Test 2</td>
                 <td width="20%">Test 3</td>
                </tr>
                <tr>
                  <td width="18%" style="border-right:0.01px">Test 4</td>
                  <td width="12%">Test 5</td>
                  <td width="20%">Test 6</td>
                </tr>
            </table>
        </td>
      </tr>
   </table>

style="border-right:0.01px" or style="border-right:0.1px" or style="border-right:1px" provide same result of border width, how to make this right border smaller? style="border-right:0.01px"style="border-right:0.1px"style="border-right:1px"提供相同的边框宽度结果,如何使此右边框更小? because my result rigth border on Test 1 and Test 4 are biggest then outside border.因为我在测试 1 和测试 4 上的结果右边界比边界外最大。

If you're a little more explicit in your border definition it'll work as you expect.如果您在边界定义中更加明确,它将按您的预期工作。 TCPDF's HTML/CSS parser is rather limited so it helps to be as specific as possible with your styling rules and the like. TCPDF 的 HTML/CSS 解析器相当有限,因此它有助于尽可能具体地处理您的样式规则等。

Your code should work with either border-right-width: 0.1px or with the rest of CSS properties for the shorthand of border-right , see the example HTML below and accompanying screenshot of a rendered PDF (zoomed to highlight difference)您的代码应该使用border-right-width: 0.1px或使用其他 CSS 属性来表示border-right的简写,请参阅下面的示例 HTML 和随附的渲染 PDF 的屏幕截图(放大以突出显示差异)

<table border="1">
   <tr>
      <td width="100%" colspan="4">
         <table border="0">
            <tr>
               <!-- This should work -->
               <td width="18%" style="border-right-width:0.1px;">Test 1</td>
               <td width="12%">Test 2</td>
               <td width="20%">Test 3</td>
            </tr>
            <tr>
               <!-- As should this -->
               <td width="18%" style="border-right:0.1px solid black;">Test 4</td>
               <td width="12%">Test 5</td>
               <td width="20%">Test 6</td>
            </tr>
            <tr>
               <!-- However, this does not. -->
               <td width="18%" style="border-right:0.1px">Test Broken</td>
               <td width="12%">Test :)</td>
               <td width="20%">Test :)</td>
            </tr>                
         </table>
      </td>
   </tr>
</table>

具有更明确宽度的视觉边框的差异

As you can see, it handles the first two definitions as expected with thinner borders.如您所见,它按预期处理前两个定义,边框更细。

我使用 style="border-right-color:white" 来隐藏右边框

<td style="border-right-color:white; border-bottom-color:black; border-top-color:black"></td>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM