?
Solved

table format using css

Posted on 2014-11-02
2
Medium Priority
?
111 Views
Last Modified: 2014-11-05
I'm working on a form that prints out as a PDF.  I'm using css to style the page.  In the screenshot provided, what is the best way to use css to format the top table and middle table?

The top table has no border around the top left cell and the text needs to be aligned left top.  The middle table has a bunch of content within each table cell, which would be a nested table?

Thanks for any help!
Regards.
11-2-2014-10-40-42-AM.jpg
0
Comment
Question by:-Dman100-
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 1000 total points
ID: 40418306
mmm. fun.

I've had the great (mis)fortune of having to make one of these :)

http://roberttherealtor.com/URLA.php

If you "print" (to a printer, or pdf, or whatever output device), you can see that it will look like a regular paper form. It uses a print media query to do that.

The idea was to use a combination of relative and absolute div positioning which you can see if you view the referenced CSS file. It was quite tedious to put together, but does accomplish the task.

If you need any explaining, please let me know.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 1000 total points
ID: 40418324
Something like:

http://jsfiddle.net/t32tkh8w/1/

<table>
    <tr>
        <td></td>
        <td>County</td>
    </tr>
    <tr>
        <td>Primary Applicant</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    </table

Open in new window


table {
    width:100%
}
table tr:first-child td:first-child {
    border:none
}
td{
    border:1px solid black;
    height:50px;
    vertical-align:top;
    width:70%
}

Open in new window

0

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month12 days, 17 hours left to enroll

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question