Link to home
Start Free TrialLog in
Avatar of APD Toronto
APD TorontoFlag for Canada

asked on

Having No gap between tables

Hi Experts,

How can I have no gap between tables? For example,  I have several of tables at 100% width, 1 after another and I need to have no gaps between them.

Actually, I am using 1 table per row because I am exporting them to PDF via TCPDF and I cannot have 1 running table.

It would be great if I can do this within inline html.

Any help would be appreciated.
SOLUTION
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of APD Toronto

ASKER

When I echo my html get no gaps with the following HTML

<table cellpadding="5px" width="100%" style="border-collapse:collapse;"><tr> <td align="center" style="background-color:#D8D8D8;" width="9%"> <b> Conf Number </b></td><td align="center" style="background-color:#D8D8D8;" width="4%"> <b> Trip<br>Type </b></td><td align="center" style="background-color:#D8D8D8;" width="9%"> <b> Group Name </b></td><td align="center" style="background-color:#D8D8D8;" width="5%"> <b>Room</b></td><td align="center" style="background-color:#D8D8D8;" width="4%"> <b> #<br>tot </b></td><td align="center" style="background-color:#D8D8D8;" width="3%"> <b> #<br>ad </b></td><td align="center" style="background-color:#D8D8D8;" width="3%"> <b> #<br>sn </b></td><td align="center" style="background-color:#D8D8D8;" width="3%"> <b> #<br>st </b></td><td align="center" style="background-color:#D8D8D8;" width="3%"> <b> #<br>ch </b></td><td align="center" style="background-color:#D8D8D8;" width="3%"> <b> #<br>inf </b></td><td align="center" style="background-color:#D8D8D8;" width="7%"> <b>Dep/Pre</b></td><td align="center" style="background-color:#D8D8D8;" width="6%"> <b>$ Owing</b></td><td align="center" style="background-color:#D8D8D8;" width="19%"> <b>Reservation Comment</b></td><td align="center" style="background-color:#D8D8D8;" width="7%"> <b> #attr. incl<br>in price </b></td><td align="center" style="background-color:#D8D8D8;" width="7%"> <b> #attr. sold<br>by driver </b></td><td align="center" style="background-color:#D8D8D8;" width="7%"> <b> #attr. sold<br>by other </b></td></tr></table><table cellpadding="5px" width="100%" style="border-collapse:collapse;"><tr> <td colspan="16"><b><span style="background-color:#D8D8D8">02:00- </span>
                            6 at Dundas Square by Not Assigned . 
                        </b></td></tr><tr style="height:20px;"> <td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="9%"align="left"> MR 92890 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="4%"align="left"> T1 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="9%"align="left"> Coffey/McPherson </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="5%"align="left"> 12811394 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="4%"align="left"> <b> 2 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 2 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="7%"align="left"> $0.00 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="6%"align="left"> <b> $79.00 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="19%"align="left"> 12811394 </td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td></tr></table><table cellpadding="5px" width="100%" style="border-collapse:collapse;"><tr style="height:20px;"> <td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="9%"align="left"> MR 94057 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="4%"align="left"> T1 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="9%"align="left"> Eads/Schweigert </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="5%"align="left"> 13075225 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="4%"align="left"> <b> 2 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="3%"align="left"> 2 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="7%"align="left"> $0.00 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="6%"align="left"> <b> $79.00 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="19%"align="left"> 13075225 </td><td style="margin:0px; border:1px solid black" bgcolor="#D8D8D8" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#D8D8D8" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#D8D8D8" width="7%"align="left">&nbsp;</td></tr></table><table cellpadding="5px" width="100%" style="border-collapse:collapse;"><tr style="height:20px;"> <td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="9%"align="left"> SY 95066 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="4%"align="left"> T1 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="9%"align="left"> Watt </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="5%"align="left"> 13339105 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="4%"align="left"> <b> 2 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 2 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="7%"align="left"> $0.00 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="6%"align="left"> <b> $79.00 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="19%"align="left"> #13339105 </td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td></tr></table>

Open in new window


The html on screen gives me what I want, but when I export it I get gaps as in the attached.
Manifest-2015-06-28.pdf
just wondering why you using multiple tables to do this. A single table design surely will eliminate the problem you currently facing.

I don't have the tool to debug your html now, so till then other experts probably can giving a hand.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi All,

I just wanted to answer everybody's questions, and hopefully lead to a solution...

@Ryan- I don't want to use multiple tables for this, and originally I did not. However, if I have many rows that are beyond 1 page, TCPDF stops at page 1. When I used TCPDF previously, I had a fixed row height, so I could count the # of rows and restart the table for every page, this worked well. However, in order to accommodate comments, which can be 1 line or 10 lines I have no more control over row per page, so when I output 1 table at the time to TCPDF, it goes beyond page 1.

@Ray - First, I would like to state that I don't need this report rendered on the browser, I am just doing this for debugging purposes. The main objective here is to get a well-designed PDF.

I dont believe that TCPDF can use external CSS file, CSS class, etc (I wish), I believe it can only read inline CSS. Above I also explained why I am using multiple table, but both of these statements I made from very limited use of TCPDF. In other words, I am not a TCPDF expert by far.

With this said, I am open to other suggestion on how to get this done in TCPDF. If I use HTML, that would be great because I know HTML. If not, I have also looked at briefly cells in TCPDF and I am not sure if that would be applicable for me.

For example, I imagine that with TCPDF's cells, I would need to calculate in millimeters each row, then using a loop, output each cell side by side to make up columns, and finally, using a loop to get my rows. This is a lot of work, which I don't mind, but 2 possible issues come to mind, even without looking at it:

1- If I am outputting cell by cell, will I run into performance issues?

2- Since I stated above that the comments can grow in height, how will I know where my next row starts?

Here I am talking about cells and tables, but if there is another way, I am open to that as well.

I am also tempted to go to 1 div per row, then 1 div per cell, but do not know how TCPDF will handle that. Now, this seems like the safest bet!?!

Thank you
Well, I've used both FPDF and TCPDF, and I can tell you for sure that laying out a PDF document comes with an entirely different set of issues when compared to marking up HTML then laying out a screen with CSS.  It takes a long time to get the PDF layout right, but precision to the millimeter is possible.  My recommendation is that you make up a set of test cases that contain mockup data, so you can publish and republish rapidly as you experiment with the best ways of doing the layout, because from my experience, there are a lot of tests needed to get it all right.

Performance will never be a problem.  Either class is lightning fast.
Thank you
Hi,

May I know? Which PDF you share, you want exact ?
Hi, APD....

Apply this code on your page might be it helpful

<table cellpadding="5px" width="100%" style="border-collapse:collapse;"><tr> <td align="center" style="background-color:#D8D8D8;" width="9%"> <b> Conf Number </b></td><td align="center" style="background-color:#D8D8D8;" width="4%"> <b> Trip<br>Type </b></td><td align="center" style="background-color:#D8D8D8;" width="9%"> <b> Group Name </b></td><td align="center" style="background-color:#D8D8D8;" width="5%"> <b>Room</b></td><td align="center" style="background-color:#D8D8D8;" width="4%"> <b> #<br>tot </b></td><td align="center" style="background-color:#D8D8D8;" width="3%"> <b> #<br>ad </b></td><td align="center" style="background-color:#D8D8D8;" width="3%"> <b> #<br>sn </b></td><td align="center" style="background-color:#D8D8D8;" width="3%"> <b> #<br>st </b></td><td align="center" style="background-color:#D8D8D8;" width="3%"> <b> #<br>ch </b></td><td align="center" style="background-color:#D8D8D8;" width="3%"> <b> #<br>inf </b></td><td align="center" style="background-color:#D8D8D8;" width="7%"> <b>Dep/Pre</b></td><td align="center" style="background-color:#D8D8D8;" width="6%"> <b>$ Owing</b></td><td align="center" style="background-color:#D8D8D8;" width="19%"> <b>Reservation Comment</b></td><td align="center" style="background-color:#D8D8D8;" width="7%"> <b> #attr. incl<br>in price </b></td><td align="center" style="background-color:#D8D8D8;" width="7%"> <b> #attr. sold<br>by driver </b></td><td align="center" style="background-color:#D8D8D8;" width="7%"> <b> #attr. sold<br>by other </b></td></tr></table><br/><table cellpadding="5px" width="100%" style="border-collapse:collapse;"><tr> <td colspan="16"><b><span style="background-color:#D8D8D8">02:00- </span>
                            6 at Dundas Square by Not Assigned . 
                        </b></td></tr><tr style="height:20px;"> <td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="9%"align="left"> MR 92890 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="4%"align="left"> T1 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="9%"align="left"> Coffey/McPherson </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="5%"align="left"> 12811394 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="4%"align="left"> <b> 2 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 2 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="7%"align="left"> $0.00 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="6%"align="left"> <b> $79.00 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="19%"align="left"> 12811394 </td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td></tr></table><br/><table cellpadding="5px" width="100%" style="border-collapse:collapse;"><tr style="height:20px;"> <td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="9%"align="left"> MR 94057 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="4%"align="left"> T1 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="9%"align="left"> Eads/Schweigert </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="5%"align="left"> 13075225 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="4%"align="left"> <b> 2 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="3%"align="left"> 2 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="7%"align="left"> $0.00 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="6%"align="left"> <b> $79.00 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#D8D8D8" width="19%"align="left"> 13075225 </td><td style="margin:0px; border:1px solid black" bgcolor="#D8D8D8" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#D8D8D8" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#D8D8D8" width="7%"align="left">&nbsp;</td></tr></table><br/><table cellpadding="5px" width="100%" style="border-collapse:collapse;"><tr style="height:20px;"> <td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="9%"align="left"> SY 95066 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="4%"align="left"> T1 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="9%"align="left"> Watt </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="5%"align="left"> 13339105 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="4%"align="left"> <b> 2 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 2 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="3%"align="left"> 0 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="7%"align="left"> $0.00 </td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="6%"align="left"> <b> $79.00 </b></td><td style="border-top:1px solid black; border-bottom:1px solid black;" bgcolor="#FFFFFF" width="19%"align="left"> #13339105 </td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td><td style="margin:0px; border:1px solid black" bgcolor="#FFFFFF" width="7%"align="left">&nbsp;</td></tr></table>

Open in new window

Thanks Vaibhav,

I did resolve this with Ray's suggestion, by using PDF cells.

However, could you have a look at the following question : https://www.experts-exchange.com/questions/28693143/Configuring-TCPDF-with-Header-and-Footer.html 

Thank you
ohhh,

I'm late, but i'm happy because you got a solution, great job Ray's