ansaurus

Question

Keeping content in two table columns stuck to the roof of the respective table column

Answer 1

A:

Are the cells in the same table row? Posting some example source might help diagnose the problem.

Jimmy 2008-11-20 22:26:56

Answer 2

A:

I'm not sure if I understand the problem entirely but you could look at the vertical-align css property.

Andrew Flanagan 2008-11-20 22:27:20

Answer 3

A:

I don't actually have an example with me (code at work), but I have a table with a row:

Tags omitted:

table border="1" tr td row 1, cell 1 /td td row 1, cell 2 /td td row 1, cell 3 /td td row 1, cell 4 /td /tr

The height of this table is something like 600px. In cells 2 and 3 (the middle, I have my main content). However, I can't seem to get both lined up to be snug with the roof of the cell. If I press enter on the content on the cell 3, the end result will be that this won't be level in vertical alignment with the content in cell 2.

Cell2 Cell3

Hello World

Above is the vertical alignment problem. I need to get both Hello and World directly underneath Cell2 and Cell3, respectively.

Perhaps vertical-alignment is the solution, which I haven't tried yet.

Also how could I set the table height to equal that of the cell with the most vertical content? So if cell 2 has two lines and cell 3 has one lines, then I want the table height to end at cell 2 and not have any blank, white space.

dotnetdev 2008-11-20 22:40:49

Answer 4

+1 A:

I believe the solution would be to create a rule which aligns text to the top of table cells.

td {
  vertical-align:top;
}

As an alternative, you can use column groups and columns to specify the vertical alignment of different columns. An example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>Table Columns Alignments</title>
</head>

<body>
 <table>
  <colgroup>
   <col valign="bottom"/>
   <col />
   <col valign="top"/>
  </colgroup>
  <tbody>
   <tr>
    <td>aligned to bottom</td>
    <td>no special<br/>alignment<br/><p>here</p></td>
    <td>aligned to top</td>
   </tr>
  </tbody>
 </table>
</body>
</html>

However, the browser support for this is not across the board, so YMMV.

Zack Mulgrew 2008-11-20 22:49:21

Answer 5

A:

I just tried that with some code actually, and it works!

My only concern now is if it works wth ASP.NET controls but I see no reason why it wouldn't. :)

dotnetdev 2008-11-20 22:59:01

You tried what with some code?

Zack Mulgrew 2008-11-20 23:01:25

Answer 6

A:

Since you are using a table for layout anyway, which is kinda evil, but sometimes neccessary, and often faster and cheaper, how about just setting valign="top" in the table cell markup?

It's not a css solution, but is a tried and proven method from the bad old days of table layouts.

seanb 2008-11-20 23:02:20

ansaurus

tags:

views:

answers:

Keeping content in two table columns stuck to the roof of the respective table column

related questions