Solved

<td> keeps expanding, how to prevent it

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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

624 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