Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make right border table tcpdf smaller?

Tags:

css

php

tcpdf

I try to create tcpdf using writeHTML like this $pdf->writeHTML($html, true, 0, false, 0); which $html value like code below

<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? because my result rigth border on Test 1 and Test 4 are biggest then outside border.

like image 301
Hilarius L. Doren Avatar asked Sep 18 '14 06:09

Hilarius L. Doren


People also ask

How do you customize a table border?

Go to Table Tools >Design > Table Styles > Borders, and then click the border option that you want to change.

How do you change the size of a table border in HTML?

To change the width of the table's border, use the attribute border="p" where p = number of pixels wide the border should be. Note that using this attribute also adds borders to the cells. The table below has a border of 10 pixels. This is done with the table tag <table border="10">.

Which attribute is used to set the border size in a table?

The HTML <table> border Attribute is used to specify the border of a table. It sets the border around the table cells.


2 Answers

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.

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)

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

Difference of visual border with more explicit width

As you can see, it handles the first two definitions as expected with thinner borders.

like image 106
EPB Avatar answered Sep 22 '22 18:09

EPB


I use style="border-right-color:white" to hidden right border

<td style="border-right-color:white; border-bottom-color:black; border-top-color:black"></td>
like image 29
Noom073 Avatar answered Sep 22 '22 18:09

Noom073