Solved

Css formatting of Table inside a nested div

Posted on 2007-12-02
2
2,968 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
[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 28

Accepted Solution

by:
TName earned 500 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

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

724 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