Solved

<td> keeps expanding, how to prevent it

Posted on 2015-02-20
4
60 Views
Last Modified: 2015-02-20
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.
0
Comment
Question by:elepil
  • 3
4 Comments
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 40622319
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40622326
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
 

Author Closing Comment

by:elepil
ID: 40622575
Thanks.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40622580
You're welcome!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now