?
Solved

Css formatting of Table inside a nested div

Posted on 2007-12-02
2
Medium Priority
?
2,972 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 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month13 days, 8 hours left to enroll

800 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