[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 319
  • Last Modified:

Table cells resize themselves even though a width has been specified.

I have this page here
http://glwb.net/tvguide.php
which looks pretty much how I want it to. I have specified all of the cell widths so they are appearing pretty much the same between browsers.

When I actually populate the text:
http://glwb.net/tvguide.php?showtext=1
The table cells change their size and it's not from a really long word.

Any ideas?
0
TeleKawaru
Asked:
TeleKawaru
  • 3
  • 2
1 Solution
 
softplusCommented:
Hi TeleKawaru,
This seems to come from the "split cells", which don't align properly on the hour. You can see this if you set to subject "News" (for today) and comment out the lines for channel "33 ESPN" and "552 EACT". You will see that it aligns properly with these two table rows missing, but as soon as they are back in, it will resize the table. I assume this comes from your spliting the columns into 5-minute blocks (using 6 on the half-hour). So if you have a cell that goes "half way" it will try to resize the other cells that use the block as well. (it's difficult to describe :)). It would certainly work a bit better if you used something like 15-minute blocks instead of the 5-minute ones, but I don't know if that would work for your requirements.

What would also probably work would be to make each row into it's own table. Then the "half-blocks" wouldn't interfer with other blocks (they would stay the correct size, unless you have too long words). It would however add alot of overhead (more traffic, but almost everyone has broadband now :))

John
0
 
TeleKawaruAuthor Commented:
I did make them each their own table but they didn't line up properly at all. Sometimes there would be a single row that was longer than the rest. =/
0
 
softplusCommented:
I have another idea, but I'm not sure if it works :)
- Make one table around the whole table with a fixed width, i.e. not with Width=100%
- For each row, make a new table with a fixed width (probably 2 px less than the main table).
- Do not use Colspan within the table, but rather give the columns just a fixed pixel width

something like this:
<table width="800px">
<!-- each row -->
<table width="798px">
<tr><td width="94px">content 1</td>
<td width="704px">content 2</td></tr>
</table>
<!-- next row -->
<table width="798px">
<tr><td width="155px">content 1</td>
<td width="233px">content 2</td></tr>
<td width="410px">content 3</td></tr>
</table>
<!-- end -->
</table>

You just need to make sure the widths add up with the borders you're using :). I assume the colspan is a part of the problem, as you are telling the browser that it's actually a bunch of columns + it wants to spread it evenly. If you do each line by itself and specify the exact width, maybe it will work better. BUT you will still have problems if you have long words which are wider than the column width; this will cause the one line to be longer than the rest and will look "ugly". This problem is compounded when the user overrides your font settings (i.e. the user has bad vision and uses much larger fonts - but in this case they are usually used to having the sites look differently :)).

Another possibility would be to render the column on the server and pass it as a graphic to the user. However, this uses quite a bit of "processing power" (+ code) and probably more bandwidth.

Just an idea, it's kind of hard for me to test without the full content you have :)
John
0
 
TeleKawaruAuthor Commented:
I changed it to 15 minutes increments and it worked perfectly! Thanks!
0
 
softplusCommented:
Glad to see it work, I'll have to check what shows are on now :))
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now