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.
APD TorontoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan ChongCommented:
can you post existing codes which contains your tables?
0
APD TorontoAuthor Commented:
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
0
Ryan ChongCommented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Dave BaldwinFixer of ProblemsCommented:
You are getting double borders because 'border-collapse' only works on the current table.  The further problem is that TCPDF has it's own HTML interpreter that converts your code into PDF code.  And it looks like you have encountered a situation where it works differently than your browser.  And another problem is that since you are using separate tables for each line, they are not lining up with each other.
0
Ray PaseurCommented:
Tables for layout made sense in 1995, but since the advent of CSS, they have been rendered obsolete, except for tabular data.  Today a good layout would use named <div> elements that are styled with CSS classes (not explicit inline CSS).  I'm not sure how good TCPDF would be with something like this, so I want to gently suggest a different approach to your application.

Philosophy:
HTML is a semantic markup language.  PDF is a document layout language.  These two are not quite as different as fish and bicycles, but almost.  HTML attaches meaning to data elements, but has no knowledge of position or display.  PDF has the tools for position and display on the printed page, but has no knowledge of the meaning.  The more you can separate these two applications, the better off your work will be.

Practice:
If you need both HTML and PDF display of the data, write two separate display applications.  Both of them can use the same data source (a JSON string makes good sense) and each of them can operate independently of the other.  This means you can test and debug each application independently, and the complex interactions between HTML and PDF are completely eliminated.

Summary:
This redesign is what Model-View-Controller applications embody.  Your data source is the Model.  Your client's request handler is the Controller; it tells the application whether to produce HTML or PDF from the Model,  Your application will have two Views, one for HTML and one for PDF.  From experience I can guarantee that this is the best design for something like the current application.  You might also find that a net new additional View will make sense for mobile devices, too (adaptive and responsive design is still in its infancy), especially if you're working from an existing application that has its own HTML generator for desktop views.

Best of luck with the project! ~Ray
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
APD TorontoAuthor Commented:
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
0
Ray PaseurCommented:
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.
0
APD TorontoAuthor Commented:
Thank you
0
Vaibhav BaggaCommented:
Hi,

May I know? Which PDF you share, you want exact ?
0
Vaibhav BaggaCommented:
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

0
APD TorontoAuthor Commented:
Thanks Vaibhav,

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

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

Thank you
0
Vaibhav BaggaCommented:
ohhh,

I'm late, but i'm happy because you got a solution, great job Ray's
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.