How to make right border table tcpdf smaller?

Question

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.

Nelia

1px is the smallest, you can't work with half pixels or 1/10th of a pixel. – Provincialism

how to make right border line height as same as outside border? – Nelia

@HilariusDoren have yout tried to use: table { border-collapse: collapse; } w3schools.com/cssref/pr_border-collapse.asp – Starrstarred

@Starrstarred its still doesn't work for me – Nelia

Please upload a working JSFiddle. I've tried copying your code, but I don't see anything that resembles your question. – Uniliteral

@Uniliteral : sorry I don't understand what you're going to do by asking upload JSFiddle. I am not used JSFiddle, just PHP and TCPDF and this case happen while create PDF file using tcpdf – Nelia

Well, if you create a jsfiddle that shows your problem, we might be able to resolve it by tweaking your css/html. Check out www.JSfiddle.net. – Uniliteral

Answer 1

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>

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

Bouchier

And why the white color for the border seems like grey? – Wireman

Answer 2

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>

Pirn

That's very helpful! I have a question. If the background color is other color then the border color should be the same one to background color? – Absently