Silliw Elbon Posted July 3, 2013 Share Posted July 3, 2013 Hello-- I'm trying to have nested tables with variable data. When the data on the right side of the table expands greater than the nested table on the left, the left table does not expand in the whole cell height wise. What would be a way to resolve this? This is just an example I created in the W3schools Tryit Editor. <!DOCTYPE html><html><head><style>.table1{border-style:solid;border-color:red;border-width:1px;}.table2{height:100%;border-style:solid;border-color:blue;border-width:1px;}</style></head><body> <table class="table1" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td width="25%"> <table class="table2" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td width="25%"> <p>ABC</p> </td> <td width="75%"> <p>Not Stuff</p> </td> </tr> </tbody> </table> </td> <td width="75%"> <p><b>Some Text</b></p> <p><b>Some Text</b></p> <p><b>Some Text</b></p> <p><b>Some Text</b></p> <p><b>Some Text</b></p> <p><b>Some Text</b></p> <p><b>Some Text</b></p> </td> </tr> </tbody> </table></body></html> Thanks for any thoughts on this. Link to comment Share on other sites More sharing options...
Ingolme Posted July 3, 2013 Share Posted July 3, 2013 I'm afraid nested tables are one of the worst ways you could build a website. If, instead of making a second table, you just add an extra column to the first table you'll have those columns the same height as the content in the other table. But using tables to make a website layout is bad to begin with. You should learn more CSS and look for CSS layout tutorials. Link to comment Share on other sites More sharing options...
jeffman Posted July 3, 2013 Share Posted July 3, 2013 If we could "fix" this problem, what would the result look like? What would you like it to look like? Link to comment Share on other sites More sharing options...
Silliw Elbon Posted July 3, 2013 Author Share Posted July 3, 2013 This also isn't for a webpage design. I'm working with a tool that produces an HTML output (for example. that can be used for an email). The fix may not be available, but doesn't hurt to ask. I've attached a little paint drawing what I want (LookNFeel) and what I currently get (LookNotFeel) I approached first having 3 columns, but I could not figure out how to line up the data in the second column to the first column. So if we can solve this, then there is not reason for what I am trying currently. Anyways, so I changed the approach to the sub table in the row, which resolves lining up data from Col1 and Col2. When placing the column border between those cells, it has the issue of not spanning from row to row, when the data on the right stretches the table out. Thanks again. Link to comment Share on other sites More sharing options...
jeffman Posted July 3, 2013 Share Posted July 3, 2013 You'll have to post the most current HTML. Link to comment Share on other sites More sharing options...
Silliw Elbon Posted July 3, 2013 Author Share Posted July 3, 2013 The code I used is as close as it gets without having real data on hand. I'd rather think about the first approach. I think it'd be cleaner, but I'm unsure how to line up the data in col 1 and col 2, since they are separated. The only thing I can think of to solve that is to align them to the top, but I'd rather them be centered for a better feel. Do you know any ways to align data from one column with data in another, but still have them centered vertically? Link to comment Share on other sites More sharing options...
jeffman Posted July 3, 2013 Share Posted July 3, 2013 Remember there are two different kinds of table cells to play with. There is the big table cell on the left in table1. There are also the table cells in table2. With this -- .table2 td {vertical-align: top;} the content of the cells in table2 lines up no matter how many <p> elements are in each. Changing the vertical-align of .table1 td doesn't affect that. You can tweak other positioning with padding. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now