CSS Equivalent of Table Rowspan with Fluid Height

Posted by Gabe on Stack Overflow See other posts from Stack Overflow or by Gabe
Published on 2010-04-09T21:33:26Z Indexed on 2010/04/09 21:43 UTC
Read the original article Hit count: 938

Filed under:

css

|

css-tables

|

html-table

I'm trying to accomplish the following using CSS:

<table border="1" width="300px">
<tr>
    <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
<tr>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
</table>

alt text

The examples I've seen for accomplishing this utilize fixed heights or allow the content to wrap around the left column. Is there an elegant way to accomplish this using CSS?

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about css-tables

CSS Tables & min-width container?

as seen on Stack Overflow - Search for 'Stack Overflow'
<div id="wrapper"> <div id="header">...</div> <div id="main"> <div id="content">...</div> <div id="sidebar">...</div> </div> </div> #wrapper { min-width: 900px; } #main { display: table-row; } #content { display: table-cell;… >>> More
css display:table first column too wide

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a css table setup like this: <div class='table'> <div> <span>name</span> <span>details</span> </div> </div> The css for the table is: .table{ display:table; width:100%; } .table div{ text-align:right; display:table-row; border-collapse:… >>> More
CSS Equivalent of Table Rowspan with Fluid Height

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to accomplish the following using CSS: <table border="1" width="300px"> <tr> <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td> <td>Here is some sample text. And some additional sample… >>> More
display:table killing me in IE

as seen on Stack Overflow - Search for 'Stack Overflow'
I want to create horizontally-aligned table cells like the ones on this page. I've followed the instructions, and I've even copied the css and markup verbatim, but no matter what I do IE 8 renders my table cells as blocks (stacked on top of each other instead of aligned next to each other). css: <style… >>> More
Front-end structure of large scale Django project

as seen on Programmers - Search for 'Programmers'
Few days ago, I started to work in new company. Before me, all front-end and backend code was written by one man (oh my...). As you know, Django app contains two main directories for front-end: /static - for static(public) files and /templates - for django templates Now, we have large application… >>> More