Table inside of a table cell

The cells of the inner table are smaller!

Page 1 of 1

8 Replies - 5847 Views - Last Post: 18 June 2009 - 10:09 AM

#1 strakerc   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 31-May 08

Table inside of a table cell

Post icon  Posted 28 May 2009 - 11:55 AM

So I am creating HTML table templates that use PHP to make calls to databases stored online using mySQL, and I've ran into a formatting problem. The customer keeps changing the font size of the table cells, and with the enlargement many cells now have 2 lines of text instead of one. This showed me a flaw in my code that I want to fix "correctly" (i.e. not hack it) so that it will stay correct with future changes.

To the point, my flaw lies where I have a table inside of a table cell. Before pasting code, I would like to explain what I theoretically do. I first bypass all padding and borders of the outer table cell. Then, I create a table inside this cell that also bypasses borders (it just uses the borders from neighboring cells/table edges). I then have a simple 2 column table inside this cell (that spans multiple columns of the outer table).

If the cells in the same row as this inner table are the same size as the cells of the inner table (size meaning lines of text, so height, not width) the result is perfect. However, if cells outside the inner table are two lines of text, and the inner table cells are only one line, HTML does not resize the inner cells to be the same height as the neighboring cells outside the inner table. Is there a way around this, besides playing around with the height of the inner table cells to match (by either using <br /> or defining the height of the cell? The reason I don't want to hack this is I am making 70 templates based off of this code and so maximum copy and paste efficiency is needed, as well as adaptability to future changes which may change the height of cells further.

So I hope that is an adequate word description of what I am doing. This is hard to paste the code as the data is all php calls, so I will edit the table row I care about here, manually inserting the data:
  <td>Weld End Standard (Butt Weld Only)</td>
  <td colspan="3" class="bypassCell"><table width="100%" class="cssTable bypassTable">
  <tr>
	  <td width="50%" class="data innerTableCell">N/A</td>
	  <td width="50%" class="data innerTableCellEnd">N/A</td>
	</tr>
  </table></td>



The above table is usually 4 columns, each width="25%" (hence the colspan="3"). It is also my defined cssTable (the CSS code is provided below). Please don't ask why I don't do this without inner tables, it is necessary as there are many other inner tables I use and this is necessary for aesthetic reasons (I have simply extracted one out for an example, it is actually in between two other inner tables of different numbers of columns where there lines line up with this one).

Additionally, I am obviously using CSS extensively (helps for making easy changes accross 70 templates). Here are the CSS classes you need to see:
/* Custom CSS Table */
.cssTable {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-decoration: none;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #000;
	margin-left: auto;
	margin-right: auto;
}

/* Standard cells for the cssTable */
.cssTable td {
	font-size: 16px;
	background-color: #DDFFFD;
	border: 1px solid #000000;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
}

/* The dynamic data being retrieved from the database */
.data {
	color: #009;
	text-align: center;
}

/* Bypass cssTable cell padding and borders*/
.bypassCell {
	padding-top: 0px !important;
	padding-right: 0px !important;
	padding-bottom: 0px !important;
	padding-left: 0px !important;
	border-top-width: 0px !important;
	border-bottom-width: 0px !important;
	border-left-width: 0px !important;
	border-top-style: none !important;
	border-bottom-style: none !important;
	border-left-style: none !important;
	border-right-width: 0px !important;
	border-right-style: none !important;
}

/* Bypass cssTable borders */
.bypassTable {
	border: 0px none #000000 !important;
}

/* Cell for inner table */
.innerTableCell {
	border-top-width: 0px !important;
	border-bottom-width: 0px !important;
	border-left-width: 0px !important;
	border-top-style: none !important;
	border-right-style: solid !important;
	border-bottom-style: none !important;
	border-left-style: none !important;
}

/* Last cell for inner table */
.innerTableCellEnd {
	border: 0px none #000 !important;
}


I know this is a long and detailed post, but neither me nor my coworkers can figure this out besides mentioned "hacked" ways. I appreciate all help. Thanks!

This post has been edited by strakerc: 28 May 2009 - 11:56 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Table inside of a table cell

#2 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Table inside of a table cell

Posted 28 May 2009 - 01:18 PM

It actually would be quite difficult to accomplish this - you could set the height and turn overflow: hidden and that would cut of the additional lines, but I think it would be better to simply truncate the data based on how many characters you feel represents 1 line using PHP. This method will work across all browsers and give you a more consistent look. Whereas the first method is going to take some working on in IE.

Hope that that answered your question.

--

Greg

This post has been edited by gregwhitworth: 28 May 2009 - 01:19 PM

Was This Post Helpful? 0
  • +
  • -

#3 strakerc   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 31-May 08

Re: Table inside of a table cell

Posted 28 May 2009 - 01:33 PM

Thank you for your reply. I was worried it would be difficult...unfortunately truncating the data is out of the question, as the customer firmly sets what the data is and how large it is. Could explain a bit more what the overflow:hidden tag is? I have not used it before, and it looks like I would make a small CSS class setting this? And this would allow me to set the height of the cell to be large and would automatically shrink it to be equal? Please let me know if I am understanding this correctly.

Again, I have ugly ways of achieving this (that have the text not centered, etc), and this way may be acceptable if the text is still centered in the cell as it needs to be. Thanks again for your help.
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Table inside of a table cell

Posted 28 May 2009 - 02:57 PM

I have never done it using tables, as tables are a deprecated layout form of development unless you are displaying tabular data. The overflow:hidden does exactly what you think it does - when you set a height to say 25px; anything that goes past 25px will be hidden.

I do wish that you would of given us more information because I think a non-tabular way of doing at least some of your stuff may be useful.

Also, WHY are you giving the control of how large it is to the client if you desire for it to be set height? If you are using a textarea client, such as TinyMCE, they allow you to remove buttons - thus making it so that the user can't control the font size.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#5 strakerc   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 31-May 08

Re: Table inside of a table cell

Posted 29 May 2009 - 08:19 AM

I'm sorry, I am a bit confused by your response. I am using HTML tables for tabular data...sorry if my initial description was confusing, let me try to clarify things now. I am making 70 templates of "data sheets" that just consist of differing tables, filled with information.

This isn't necessary to know, but the information comes from tables on mySQL and is called using PHP embedded within the HTML templates. Thus, a user can make a call to look up any table like this: http://localhost/php...ntname=blahblah (I may create a GUI later, but again not relevant to my question at hand).

This is just a database project (I'm just trying to convey that I am NOT using tables for design).

As for "client control," I am confused what you are saying here. I just meant the customer can define what he wants, and may even change the code down the line. Thus, my code should be as adaptable as possible. The customer has control over a lot of things as that is just the way our companies signed the contract, there is nothing I can do about this.

I appreciate your help, and please let me know if I still have you confused.
Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Table inside of a table cell

Posted 29 May 2009 - 08:31 AM

NO - I'm not confused. It is just a lot of people come in here asking for help with tables and mainly they are using them for layout - not tabular data.

Quote

I just meant the customer can define what he wants, and may even change the code down the line. Thus, my code should be as adaptable as possible.

Per this quote, this makes me think that truncating the display of the text IS the best bet. I know you said that before it isn't possible, and I assumed that you were referring to the fact the users could change the font size thus making truncation not practical. But if they can't change font size and YOU DO want to limit (thus not be completely adaptable) then I would truncate it, and say - on mouse over the td display the whole paragraph.

Even if you are displaying tabular data it isn't usually necassary to use THAT MANY tables within another. They are very rigid and divs would work just fine for inner content.

I digress though, we have rehashed the possible methods you could use - keep us up to date on how it goes.

--

Greg
Was This Post Helpful? 1
  • +
  • -

#7 strakerc   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 31-May 08

Re: Table inside of a table cell

Posted 29 May 2009 - 12:40 PM

Quote

NO - I'm not confused.


I apologize; I meant no insult. I will check out divs as a replacement, as well as data truncation. Thank you again for your help.
Was This Post Helpful? 0
  • +
  • -

#8 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Table inside of a table cell

Posted 29 May 2009 - 01:26 PM

No prob - I wasn't insulted - but that is hard to show through text. Good luck and keep us posted.
Was This Post Helpful? 0
  • +
  • -

#9 strakerc   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 31-May 08

Re: Table inside of a table cell

Posted 18 June 2009 - 10:09 AM

So I manged to figure things out and make height dynamic for the case I needed it (as well as get a truncation of data approved by the customer). Thanks for your help getting this far. I trashed a lot of said inner tables, and at most now only have one table inside of a row...

Quote

I do wish that you would of given us more information because I think a non-tabular way of doing at least some of your stuff may be useful.


I'm curious what ideas you would have/what more information you would need from me...

However, with one fix comes another problem. At full screen, there is no problem at all. However, upon resizing the browser window to small dimensions, the table shrinks inconsistently...The main, outer table does so correctly I believe, while for some reason any inner tables resize differently...I have provided screen shots to show what I mean. 'Large' shows my table at full screen, and you can see it is fine (you can also see why I need to use inner tables, as the inner tables span 1.5 colums...). 'Small' shows the resizing issue when the browser window is shortened...For some reason these are not opening properly in Microsoft Photo Editor, but it does open correctly in Paint. If things look really whacky (like missing lines in the table, etc), then it's probably the file opening strangely...

If there are any suggestions, or if code needs to be revealed, let me know and this can be done.

Thanks again!

Edit: Well DIC obviously has a really nice thumbnail feature, so no worries about opening the file :)

Attached image(s)

  • Attached Image
  • Attached Image

This post has been edited by strakerc: 18 June 2009 - 10:12 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1