Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Netherlands
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Netherlands
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Netherlands
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •