Height of table cells

I have a table in which the first column contains shipping addresses and the rest of the columns display items shipping to each address.

The cell in the first column (that contains the shipping address) has a rowspan equal to the number of rows of items being shipped there.

To illustrate, a typical entry would be:


<tr>
  <td rowspan="3">
    Building<br>
    Street<br>         
    City<br>            
    State, zip 
  </td>
  <td>Item 1</td>
</tr>
<tr>
  <td>Item 2</td>
</tr>
<tr>
  <td>Item 3</td>
</tr>

Note that the number of items per address can vary from 1 upwards and the rowspan is set accordingly.

The issue I am having is that, when there are only 2 items, the height of each item td is half that of the address td, which results in vertical whitespace between the text of the two items which is not there when there is a greater number of shipments listed.

In other words, with 2 items, Item 1 would be level with Location and Item 2 would be level with City. With 4 items, Item 1 would be level with Building, Item 2 would be level Street, etc.

What I would like to achieve is that the vertical whitespace between items would be the same regardless of the number of items so that Item 2 would be level with Street regardless of how many items there are.

Is there any way to achieve this?

Try something like this:

td:last-child { max-height: 1.2em; } 
tr:last-child td:last-child { max-height: none; }

Why do you need rowspan because that means the rows will always span the total height?

Surely 2 simple cells will automatically do what you want?

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
    margin:0;
    padding:0;
    list-style:none;
}
td,th {
    padding:5px 35px;
    vertical-align:top;
    border-bottom:1px solid #000;
    text-align:left;
}
</style>
</head>
<body>
<table>
    <tr>
        <th scope="row"> Building<br>
            Street<br>
            City<br>
            State, zip </th>
        <td>
            <ul>
                <li>Item 1</li>
            </ul>
        </td>
    </tr>
    <tr>
        <th scope="row">
            Building<br>
            Street<br>
            City<br>
            State, zip 
        </th>
        <td>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </td>
    </tr>
</table>
</body>
</html>

I don’t think that’s semantically correct though.

that’s my take on it too – lose the rowspan…

That really hinges on what the rest of that data is. Semantically it may in fact be correct to maintain the rowspan if the other columns always have the same number of rows (count, item, price per unit, total price, shipping for example). In that case I would build the data before output and count how many there are per address, using that as your rowspan instead of using a fixed value!

Hey guys, thanks for your responses.

I must apologize. The example html I provided was not exactly what I have. I tried to simplify it, thinking that would make it easier to explain, but that did not turn out to be very helpful to you.

Here are some screenshots of the table in question. I think you should be able to figure out the html from them and see the issue I am trying to fix in table1.gif.

http://www.webme.co.nz/misc/table1.gif
http://www.webme.co.nz/misc/table2.gif

Note that, in some cases, there will be more than one shipping address in the same table, so the block shown in the images will be repeated (excluding the headers) for each shipping address. And each shipping address can have a different number of items.

The rowspan on the shipping address is calculated and inserted by php based on the number of items.

Another point to consider is that this will be used in the html version of an email, so any CSS would need to work in an email.

Hmmm…

I guess my failure to provide adequate information in my initial question penalizes me from receiving further assistance :wink:

Or perhaps the question is now too difficult to answer?

But most likely my post just got pushed down so far it was no longer noticed by those able to assist :slight_smile:

Anyone?

Here’s how I would do it:


<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Table Example</title>
    <style rel="stylesheet">
			table { border-collapse:collapse; }
			td, th {font:normal 14px/1.2 Arial, Helvetica, sans-serif; padding-right:24px; }
			tr { border-bottom:1px dotted #000; }
			th { text-align:left; font-weight:bold; }
			td { vertical-align:top; }

		</style>
  </head>
	<body>
		<table>
			<tr>
				<th scope="col">Shipping address</th>
				<th scope="col">Ordered</th>
				<th scope="col">SKU</th>
				<th scope="col">Product</th>
				<th scope="col">Cost</th>
				<th scope="col">Center</th>
				<th scope="col">Some more stuff</th>
			</tr>
			<tr>
				<td rowspan="3"> <!-- # of rows is dynamic! -->
					QUITMAN<br />
					ATTN JIMMY WILKERSON<br />
					5852 HEBER SPRINGS RD WEST<br />
					QUITMAN, AR 72131
				</td>
				<td>1</td>
				<td>689-110</td>
				<td>Fl000021</td>				
				<td>2800</td>
				<td>Quitman Branch Ops</td>
				<td>Check/Money etc...</td>
			</tr>
			<tr>
				<td>2</td>
				<td>MJK6410</td>
				<td>OS00282</td>
				<td>2800</td>
				<td>Quitman Branch Ops</td>
				<td>Dum Dum Lollipops, ...</td>
			</tr>
			<tr>
				<td>1</td>
				<td>SPR39250</td>
				<td>OS00283</td>
				<td>2800</td>
				<td>Quitman Branch Ops</td>
				<td>Adding Machines...</td>
			</tr>
		</table>
	</body>
</html>

Hi Hueij

Thanks for taking the time to reply.

Maybe I’m missing something, but I can’t see how your example takes care of the issue I have as shown in table1.gif, i.e. that the text of the second row begins lower down when there are only 2 rows.

I see you are putting the product description on the same line as everything else, but even if each item was on just one line, the issue would still arise when there were only 2 items.

In case you did not realize it, the product description in table1.gif is aligned at the top of it’s cell.

I am thinking that I may be better off using a div for each address and within that div, display the address floated left and a table of items on the right. That way there will be no rowspan to cause the issue and it would probably be more semantic?

Something like this:


<style type="text/css">
.shipment {
    border-bottom: 1px solid #ccc;
}
p {
    float: left;
    margin-top: 0;
}
table { border-collapse:collapse; }
th, td, p {
    font: 14px/1.2 Arial, Helvetica, sans-serif;
    text-align: left;
    padding-right: 15px;
}
th {
    font-weight: bold;
}
tr.item td {
    border-top: 1px solid #ccc;
}
td.desc{
    font-style: italic;
}
</style>
</head>
<body>
<div class="shipment">
    <p>
        QUITMAN<br />
        ATTN JIMMY WILKERSON<br />
        5825 HEBER SPRINGS RD WEST<br />
        QUITMAN, AR, 72131
    </p>
    <table>
        <tr>
            <th>Ordered</th>
            <th>SKU</th>
            <th>Product</th>
            <th>Cost</th>
            <th>Center</th>
        </tr>
        <tr class="item">
            <td>1</td>
            <td>689-110</td>
            <td>Fl000021</td>
            <td>2800</td>
            <td>Quitman Branch Ops</td>
        </tr>
        <tr>
            <td colspan="5" class="desc">Check/Money etc...</td>
        </tr>
        <tr class="item">
            <td>2</td>
            <td>MJK6410</td>
            <td>OS00282</td>
            <td>2800</td>
            <td>Quitman Branch Ops</td>
        </tr>
        <tr>
            <td colspan="5" class="desc">Dum Dum Lollipops, ...</td>
        </tr>
    </table>
</div>
</body>

QUESTION: Is the way I am displaying the product description in a colspan a semantic no-no?

Hi,

Sorry for the late reply but I’ve been away all weekend.

I suppose it would be more semantic to use a nested table in this case and maintain some relationship between the name and the associated data.


    <table>
        <tr>
            <th>QUITMAN<br />
                ATTN JIMMY WILKERSON<br />
                5825 HEBER SPRINGS RD WEST<br />
                QUITMAN, AR, 72131</th>
            <td><table>
                    <tr>
                        <th>Ordered</th>
                        <th>SKU</th>
                        <th>Product</th>
                        <th>Cost</th>
                        <th>Center</th>
                    </tr>
                    <tr class="item">
                        <td>1</td>
                        <td>689-110</td>
                        <td>Fl000021</td>
                        <td>2800</td>
                        <td>Quitman Branch Ops</td>
                    </tr>
                    <tr>
                        <td colspan="5" class="desc">Check/Money etc...</td>
                    </tr>
                    <tr class="item">
                        <td>2</td>
                        <td>MJK6410</td>
                        <td>OS00282</td>
                        <td>2800</td>
                        <td>Quitman Branch Ops</td>
                    </tr>
                    <tr>
                        <td colspan="5" class="desc">Dum Dum Lollipops, ...</td>
                    </tr>
                </table></td>
        </tr>
    </table>


Thanks Paul

I was wondering about that, but was not sure whether or not nesting the tables was an acceptable option.

Thanks for your advice. Always appreciated.

Looking at the data, I’d go with kiwijohns using what I mentioned before (and his comment suggests) – you pull a count of how many there are first, and plug that into the rowspan.

That doesn’t solve the problem does it? If you only have two rows of data then the height of the rows will be large (i.e. they will match the address height) which is the problem the OP said they wanted to avoid.

Unless I got the wrong end of the stick which is quite likely :slight_smile:

You got it. It is the height of the rows when there are two rows of data that I was trying to overcome.

I think it is apparent that the rowspan idea is not the best solution as there is no easy way to force the boundary of the first and second row higher so it looks the same as when there are multiple rows.

So, at this point, I guess I need to choose between using nested tables or divs with the address floated left.

In regard to what you said about nested tables tying the address to the items, I am leaning toward my idea of floating the address to the left, but making the “building” a heading. So each shipment would be something like:


<div class="shipment">
    <h3>QUITMAN</h3>
    <p>
        ATTN JIMMY WILKERSON<br />
        5825 HEBER SPRINGS RD WEST<br />
        QUITMAN, AR, 72131
    </p>
    <table>
        <tr>
            <th>Ordered</th>
            <th>SKU</th>
            <th>Product</th>
            <th>Cost</th>
            <th>Center</th>
        </tr>
        <tr class="item">
            <td>1</td>
            <td>689-110</td>
            <td>Fl000021</td>
            <td>2800</td>
            <td>Quitman Branch Ops</td>
        </tr>
        <tr>
            <td colspan="5" class="desc">Check/Money etc...</td>
        </tr>
        <tr class="item">
            <td>2</td>
            <td>MJK6410</td>
            <td>OS00282</td>
            <td>2800</td>
            <td>Quitman Branch Ops</td>
        </tr>
        <tr>
            <td colspan="5" class="desc">Dum Dum Lollipops, ...</td>
        </tr>
    </table>
</div>

That seems tidier when un-styled and does seem more semantic to me (though I’m no expert on semantics).

Then I can float the heading and paragraph left (guess I will actually need to put them inside a container and float that) to get the visual layout I want.

Thanks again for your input. Yours too deathshadow60.