<td> keeps expanding, how to prevent it

I'm trying to make an appointments type of screen where each row is a 15-minute time slot. I have two problems:

1)  I need a 1px gray line in between rows, which somehow won't show;
2)  Even though I had set my <table> to 100% width (because I need it to expand the full breadth of the viewport. I don't want the <td> cells expanding to the max width. In my code snippet, I set the cells to be 58px wide, but it keeps expanding to the full width of the screen as well. How do I prevent that?

Would appreciate any help. Thanks.

Here's the HTML code:

<!DOCTYPE html>
<html>

<head>
<style>
table {
    width: 100%;
    border: 1px solid #000;
    border-collapse: separate;
}
tr {
    border: 1px solid #CCC;
}
td {
    vertical-align: top;
    border: 1px solid #FF0000;
}
.time {
    width: 58px;
}
ac {
    display: block;
    border: 1px solid #CCC;
    border-radius: 10px;
    padding: 5px;
    width: 250px;
    height: 100px;
    box-shadow: inset 0px 0px 10px -2px #333;
    background-color: cornsilk;
    cursor: pointer;
}
</style>
</head>

<body>

<table>
    <tr>
        <td class="time">12:00am</td>
    </tr>
    <tr>
        <td class="time">12:15am</td>
    </tr>
    <tr>
        <td class="time">12:30am</td>
    </tr>
    <tr>
        <td class="time">12:45am</td>
    </tr>
    <tr>
        <td class="time">01:00am</td>
    </tr>
    <tr>
        <td class="time">01:15am</td>
    </tr>
    <tr>
        <td class="time">01:30am</td>
    </tr>
</table>

</body>
</html>

Open in new window


Thanks.
elepilAsked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
You would have to include another <td> to use up the rest of the space.  Tables have worked exactly the way you see since they were first part of HTML which was in 1996 or earlier.  The content will expand to fill the space which in this case is '100%'.  If you remove the '100%', the table will only be the width of the content which would be 58px plus borders and padding.

Try this:
<tr>
        <td class="time">12:00am</td><td> </td>
    </tr>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
And <tr> is a 'grouping element' and I don't think you can put a border around it.  You can add a background color but not much else.
0
 
elepilAuthor Commented:
Thanks.
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome!
0
All Courses

From novice to tech pro — start learning today.