Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-25-2012, 03:04 PM   PM User | #1
nezmundo
New to the CF scene

 
Join Date: Jun 2012
Location: Netherlands
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
nezmundo is an unknown quantity at this point
Positioning inner table inside cell with text

Hello,

I'm a newbie programmer. I'm hoping for some advice on complex html tables, please.

I wish to enclose an html table in such a way that it is positioned to the bottom and to the right of its enclosing element. I would imagine that this enclosing element should be a table cell (itself held inside a table). I also want the enclosing element to have some text in the upper left corner, where space has been left as a result of the inner table positioning. Like this image:



In the .css file I have the inner table's margins on the left and top set to a value. I also have the enclosing cell's padding on the top and left set to a value. It seems to work fine when I have no text. However, when I add the text to the top left, the inner table is pushed down and extends beyond the lower boundary of the enclosing cell. This effect varies across browsers.

Is there a way to add this text to the cell and retain the correct layout? Do I need to rethink my structure?

Any advice appreciated.
nezmundo is offline   Reply With Quote
Old 06-25-2012, 03:10 PM   PM User | #2
abduraooft
Supreme Master coder!

 
abduraooft's Avatar
 
Join Date: Mar 2007
Location: N/A
Posts: 14,680
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
abduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really nice
Using nested tables? Err... there might be something wrong with your approach. Have a look at http://www.hotdesign.com/seybold/. Please post your current code and we may give you an alternative way.
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
abduraooft is offline   Reply With Quote
Old 06-25-2012, 03:54 PM   PM User | #3
nezmundo
New to the CF scene

 
Join Date: Jun 2012
Location: Netherlands
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
nezmundo is an unknown quantity at this point
Thanks for the reply.

This use of nested tables is quite specific and is the best solution to my problem based on what I know. I have some html files containing descriptions of text commands for a desktop application. Each command has a number of optional parameters and modifiers and is described using a special notation. The idea is to construct tables (or things that look like tables) to describe each command so that users can understand them more easily. A script creates each of these tables dynamically based on each command on every html page, and appends them to each page.

I'll create some code samples and post them.
nezmundo is offline   Reply With Quote
Old 06-26-2012, 02:28 PM   PM User | #4
nezmundo
New to the CF scene

 
Join Date: Jun 2012
Location: Netherlands
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
nezmundo is an unknown quantity at this point
I have created a JSFiddle (containing only HTML and CSS) which shows my approach to the problem so far:

http://jsfiddle.net/naldenvb/jC8MQ/1/

As you can see, the second cell in the master table contains an inner table. What I would like to be able to do is to resize this inner table (or maybe modify its enclosing cell) so that only the top and left strip of the enclosing cell is shown. The enclosing cell's text should remain, and the inner table should stay inside the enclosing cell as the picture in my original post shows.

Is there a way of doing this?

Thanks

Last edited by nezmundo; 06-26-2012 at 02:34 PM.. Reason: Added info
nezmundo is offline   Reply With Quote
Reply

Bookmarks

Tags
css, html, table

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 07:42 AM.


Advertisement
Log in to turn off these ads.