Solved

<td> keeps expanding, how to prevent it

Posted on 2015-02-20
4
61 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 83

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 83

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 83

Expert Comment

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 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

22 Experts available now in Live!

Get 1:1 Help Now