Question : Using CSS to format inside of a table cell

I'm using ASP.NET and I have a table in my ASPX page. Inside of each cell I have some asp labels, and a command button.

Problem:
Because the title can be different lengths the command button ends up being at different heights inside each cell. I need all of the buttons to visually line up across the row and have the times align to the top of the row. I would like to do this by changing the CSS if possible.

tableError1.gif (5 KB) (File Type Details)

What the result looks like

tableError2.gif (5 KB) (File Type Details)

What I want it to look like

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Sample Table</title>
    
    <style type="text/css" title="MyCSS">
    .rides 
    {
    	color:Gray;
    	border-width:thin;
    	border-color:Black;
    	border-style:solid;
    	
    	
    	
    }
    .rides td
    {
        width: 100px;
        text-align:center;	
        vertical-align: top;
        
        border-style:solid;
        border-width:thin;
        border-color:Black;
    }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table class="rides">
      <tr>
        <td>
          <asp:Label  ID="lblTime0"  runat="server" Width="100%" Text="8:00" ></asp:Label><br />
          <asp:Label  ID="lblName0"  runat="server" Width="100%" Text="Short Ride" ></asp:Label><br />
          <asp:Button ID="btnBook0"  runat="server" Width="100%" Text="Reserve Now"  /><br />
          <asp:Label  ID="lblCount0" runat="server" Width="100%" Text="2" ></asp:Label>	
        </td>

        <td>
          <asp:Label  ID="lblTime1"  runat="server" Width="100%" Text="9:00" ></asp:Label><br />
          <asp:Label  ID="lblName1"  runat="server" Width="100%" Text="The is a long ride" ></asp:Label><br />
          <asp:Button ID="btnBook1"  runat="server" Width="100%" Text="Reserve Now"  /><br />
          <asp:Label  ID="lblCount1" runat="server" Width="100%" Text="3" ></asp:Label>	
        </td>
        <td>
          <asp:Label  ID="lblTime2"  runat="server" Width="100%" Text="10:00" ></asp:Label><br />
          <asp:Label  ID="lblName2"  runat="server" Width="100%" Text="Kiddy Ride" ></asp:Label><br />
          <asp:Button ID="btnBook2"  runat="server" Width="100%" Text="Reserve Now"  /><br />
          <asp:Label  ID="lblCount2" runat="server" Width="100%" Text="5" ></asp:Label>	
        </td>
      </tr>
    </table>
    </div>
    </form>
</body>
</html>

Answer : Using CSS to format inside of a table cell

The only way I have managed this is by setting the height of the cell and then using a div around the "Reserve Now" and lblCount. See code.

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:

           
           
             <style type="text/css" title="MyCSS">
    .rides 
    {
    	color:Gray;
    	border-width:thin;
    	border-color:Black;
    	border-style:solid;
    	
    	
    	
    }
    .rides td
    {
        width: 100px;
        height:140px;  //Add this.
        text-align:center;	
        vertical-align: top;
        
        border-style:solid;
        border-width:thin;
        border-color:Black;
    }
    //Add this also
    .divBottom
    {
        display:table-cell; 
        vertical-align:bottom;
    }
    </style>

<table class="rides">
      <tr>
        <td>
          <asp:Label  ID="lblTime0"  runat="server" Width="100%" Text="8:00" ></asp:Label><br />
          <asp:Label  ID="lblName0"  runat="server" Width="100%" Text="Short Ride" ></asp:Label><br />
          <div class="divBottom">
             <asp:Button ID="btnBook0"  runat="server" Width="100%" Text="Reserve Now"  /><br />
             <asp:Label  ID="lblCount0" runat="server" Width="100%" Text="2" ></asp:Label>	
          </div>
        </td>

        <td>
          <asp:Label  ID="lblTime1"  runat="server" Width="100%" Text="9:00" ></asp:Label><br />
          <asp:Label  ID="lblName1"  runat="server" Width="100%" Text="The is a long ride" ></asp:Label><br />
          <div class="divBottom">
             <asp:Button ID="btnBook1"  runat="server" Width="100%" Text="Reserve Now"  /><br />
             <asp:Label  ID="lblCount1" runat="server" Width="100%" Text="3" ></asp:Label>	
          </div>
        </td>
        <td>
          <asp:Label  ID="lblTime2"  runat="server" Width="100%" Text="10:00" ></asp:Label><br />
          <asp:Label  ID="lblName2"  runat="server" Width="100%" Text="Kiddy Ride" ></asp:Label><br />
          <div class="divBottom">
             <asp:Button ID="btnBook2"  runat="server" Width="100%" Text="Reserve Now"  /><br />
             <asp:Label  ID="lblCount2" runat="server" Width="100%" Text="5" ></asp:Label>	
          </div>
        </td>
      </tr>
    </table>

           
         