|
Posted by Andy Fish on February 6, 2005, 3:06 pm
Please log in for more thread options
Hi All,
I have a nice easy table and/or CSS formatting problem for any gurus out
there.
I have a table with 4 columns - no "width" attribute on anything.
Some rows have 4 cells in (call these type A) and some have colspan=4 (type
B)
Some type B rows have much more text than all the type A cells put together.
When this happens, the total width of the table expands (which is good) but
it expands all the 4 columns evenly and this makes the type A rows look
wrong. I would like to have the 4th column (or possibly an extra 5th column)
take up all the slack so that the type A rows have their width the same as
if the type B row only had a short value in it.
Any ideas? - I've tried putting in a 5th column with width=100% but this
causes the first 4 columns to break into multiple lines whenever there is a
space.
|
|
Posted by Richard on February 6, 2005, 12:08 pm
Please log in for more thread options
On Sun, 06 Feb 2005 14:06:36 GMT Andy Fish wrote:
> Hi All,
> I have a nice easy table and/or CSS formatting problem for any gurus
> out
> there.
> I have a table with 4 columns - no "width" attribute on anything.
> Some rows have 4 cells in (call these type A) and some have colspan=4
> (type
> B)
> Some type B rows have much more text than all the type A cells put
> together.
> When this happens, the total width of the table expands (which is good)
> but
> it expands all the 4 columns evenly and this makes the type A rows look
> wrong. I would like to have the 4th column (or possibly an extra 5th
> column)
> take up all the slack so that the type A rows have their width the same
> as
> if the type B row only had a short value in it.
> Any ideas? - I've tried putting in a 5th column with width=100% but
> this
> causes the first 4 columns to break into multiple lines whenever there
> is a
> space.
According to information given so far, try this in CSS:
<style>
..contain {height:300px; width:300px;}
..leftcol { width:100px; height:300px; border:2px solid red; float:left; }
..row1, .row2, .row3, .row4 { width 190px; height:70px; border:2px solid
blue; }
</style>
<body>
<div class="contain">
<div class="leftcol">Sample text</div>
<div class="row1">Famous last words</div>
<div class="row2">Famous first words</div>
<div class="row3">Rich and Famous</div>
<div class="row4">Nobody special</div>
</div>
</body>
|
|
Posted by Del Ferguson on February 6, 2005, 11:19 am
Please log in for more thread options
> On Sun, 06 Feb 2005 14:06:36 GMT Andy Fish wrote:
>
>> Hi All,
>
>> I have a nice easy table and/or CSS formatting problem for any gurus
>> out
>> there.
>
>> I have a table with 4 columns - no "width" attribute on anything.
>
>> Some rows have 4 cells in (call these type A) and some have colspan=4
>> (type
>> B)
>
>> Some type B rows have much more text than all the type A cells put
>> together.
>> When this happens, the total width of the table expands (which is
>> good)
>> but
>> it expands all the 4 columns evenly and this makes the type A rows
>> look
>> wrong. I would like to have the 4th column (or possibly an extra 5th
>> column)
>> take up all the slack so that the type A rows have their width the
>> same
>> as
>> if the type B row only had a short value in it.
>
>> Any ideas? - I've tried putting in a 5th column with width=100% but
>> this
>> causes the first 4 columns to break into multiple lines whenever
>> there
>> is a
>> space.
>
> According to information given so far, try this in CSS:
>
> <style>
> .contain {height:300px; width:300px;}
>
> .leftcol { width:100px; height:300px; border:2px solid red;
> float:left; }
> .row1, .row2, .row3, .row4 { width 190px; height:70px; border:2px
> solid
> blue; }
> </style>
> <body>
> <div class="contain">
> <div class="leftcol">Sample text</div>
> <div class="row1">Famous last words</div>
> <div class="row2">Famous first words</div>
> <div class="row3">Rich and Famous</div>
> <div class="row4">Nobody special</div>
> </div>
> </body>
>
>
Richard,
I do not claim be an expert in any way, shape, or form (and I'm
constantly amazed at how far above my understanding of HTML/CSS some
members of this group are); however, exactly as written, I don't think
the table example you've given works too well in Firefox. IE6 is just
OK. In my quest for the "perfect" table substitute, this seems to be
common. What works for IE breaks in FF--or vice-versa. Cheers!
Del Ferguson
|
|
Posted by Richard on February 6, 2005, 4:09 pm
Please log in for more thread options On Sun, 6 Feb 2005 10:19:12 -0800 Del Ferguson wrote:
> Richard,
> I do not claim be an expert in any way, shape, or form (and I'm
> constantly amazed at how far above my understanding of HTML/CSS some
> members of this group are); however, exactly as written, I don't think
> the table example you've given works too well in Firefox. IE6 is just
> OK. In my quest for the "perfect" table substitute, this seems to be
> common. What works for IE breaks in FF--or vice-versa. Cheers!
> Del Ferguson
The reason it "breaks" in firefox, is because firefox does it right.
Going to find out why, I found a couple of typos and added a float:left and
it works as intended.
IE has a kind of built in "I will assume they mean to do it this way" thing.
Which is fine, but then how is one to learn proper coding if the coder
relies on the browser to correct his mistakes?
|
|
Posted by Brian on February 7, 2005, 10:51 pm
Please log in for more thread options Richard wrote:
> According to information given so far, try this in CSS:
>
> <style>
> .contain {height:300px; width:300px;}
>
> .leftcol { width:100px; height:300px; border:2px solid red; float:left; }
> .row1, .row2, .row3, .row4 { width 190px; height:70px; border:2px solid
> blue; }
> </style>
That's a brittle solution that will fail when a user chooses an
unexpectedly large font size.
--
Brian
|
| Similar Threads | Posted | | Ignore CSS table formatting & use standard HTML? | April 6, 2005, 2:02 pm |
| TextArea - Formatting text | August 24, 2004, 11:57 am |
| Bidirectional control (formatting) characters | August 16, 2006, 12:56 pm |
| Formatting Prob: Span Moves Outside Containing DIV | April 25, 2007, 8:54 am |
| Firefox/gecko tables formatting bug...or clueless coder? | June 27, 2005, 7:41 pm |
| Recommend a good text area formatting interface? | February 15, 2006, 4:39 pm |
| Weird formatting problems appearing only in Linux version of FireFox | December 23, 2004, 10:47 am |
| Windows equivalent of BBEdit's "Gentle Hierarchical" formatting option? | September 15, 2005, 3:14 pm |
| [newbie] client side jscript for a table inside a table | March 24, 2005, 8:01 am |
| How to eliminate space between table border and table contents? | December 6, 2005, 1:22 am |
|
XML Sitemap