Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Css formatting of Table inside a nested div

Posted on 2007-12-02
2
Medium Priority
?
2,981 Views
Last Modified: 2009-07-29
Hi,

I am having fun and games with the formatting of a table inside nested divs.  The table contents display shopping cart items.  I have gone for a table because I need the table border grids.  Infact, I need all cells showing a border except the top, right, bottom and left outside borders.  

But back to the problem - the table just doesn't seem to fit inside the div properly unless I use display:inline;within it's css, but when I do, it throws the rest of the css formatting for the table width, borders etc off.  Yet if I leave the display:inline; out, the table width and border formatting displays ok, but it doesn't sit UNDERNEATH the h2 element above dispite being contained within a div (<div class="shop-table-item-container">) which itself has display:inline;

I have tried a number of things here and am getting lost inside my own css.  Sorry if it seems messy.  Here's an example without display:inline; inside the table css: www.thefoodfolk.com/shop-eggs.html  Added to this, there will be a number of sections containing h1, h2 and table content which all need to be wrapped inside a single <form></form>  Anyone still with me - I hope so!!!

Look forward to hearing from you,  happy to consider an incentive for someone who can help me through this (as very time critical).
Tony
skype: tony-charman
0
Comment
Question by:Treder
2 Comments
 
LVL 28

Accepted Solution

by:
TName earned 2000 total points
ID: 20392337
Hi, in case I understand you correctly:
have you tried to simply float the table (for instance left), instead of setting it's display to inline?
E.g.:


.shop-table-item-container table {

/*other styles*/

float:left;

}
0
 

Author Comment

by:Treder
ID: 20394684
yup - so simple - many thanks!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month12 days, 10 hours left to enroll

580 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