Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

<td> keeps expanding, how to prevent it

Posted on 2015-02-20
4
Medium Priority
?
68 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 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 84

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 84

Expert Comment

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

Featured Post

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

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.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

730 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