Solved

table format using css

Posted on 2014-11-02
2
109 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 250 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 250 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Non-Resizable Pharagraph 2 28
[Bootstrap] Navigation Bar Collapse 27 69
Anchor Bookmark 6 30
Wordpress Responsive Web design and iPads 11 35
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

740 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