By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,206 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Allowing Component/Text to Flow Across Table Cells

P: 2
I'm a relative CSS newbie and I'm trying to do the following: I have a table that holds text that might span multiple cells. I want it to look something like this:

| Cell A1 | This is | Cell C1 |
|-----------| overflow |----------|
| Cell A2 | text that | Cell C2 |
|-----------| covers |------------|
| Cell A3 | three cells | Cell C3 |
| Cell A4 | Cell B4 | Cell C4 |

As you can see, the text overflows cells B1, B2, and B3. It's a little difficult to picture what I want to do from my example because when I post it, the extra white space is removed but if you want to see an example of what I want to do, look at Google Calendar. Create an event and notice that it spans a number of columns.

I've tried to do this using a <span> or <div> tag inside the <td></td> tags but if I resize the span or div to be taller than the <td>, the cell is just enlarged; it doesn't overflow to the next cell. I've tried to figure out how Google accomplishes this and I'm thinking that they might be drawing their own table via JavaScript instead of using an HTML table. Is this possible with a regular table or do I need to draw my own table?

Thanks in advance.
Apr 20 '07 #1
Share this Question
Share on Google+
1 Reply

P: 316
use the rowspan="" and colspan"" attributes to the <td></td> tag

also vist
Apr 20 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.