开发者

Help me style this day schedule table

问答 作者：

UPDATE:

I have updated my HTML. Now it works in all browsers except IE7. Any ideas? Check out my updated HTML and jsFiddle link.

Alright. I have a table which shows my company's cars and time intervals during which they have been reserved. Each hour is divided into four parts - each 15 minutes interval.

The problem is that I want the table to be 100% wide but the cells representing 15 minutes intervals should be of the same width.

A picture showing what I mean:

Help me style this day schedule table

Complimentary jsfiddle link: http://jsfiddle.net/77PqN/

Just copy and past this HTML to index.html file and look at it in your browser, hopefully you will understand what I want to achieve (numbers from 0 to 23 repsresent hours, each has colspan of 4 and bellow them are four 15 minutes intervals):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sk">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Style-Type" content="text/css" >
<meta http-equiv="Content-Language" content="sk" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Test 2</title>

<style>
table{
    border-collapse: collapse;
    width: 100%;
    border: 1px solid black;
    background: #ddd;
}
table th{
    border: 1px solid black;
}
table td.borderLeft{
    border-left: 1px solid black;
}
table td.odd{
    background: #eee;
}
table td.highlighted{
    background: yellow;
}
</style>

</head>
<body>

<table class="CalendarReservationsBodyTable">
    <thead><tr><th colspan="97">Reserved cars</th></tr>     <tr>

            <th class="corner" style="width: 28%;">Car</th><th class="odd" colspan="4" style="width: 3%;">0</th><th class="" colspan="4" style="width: 3%;">1</th><th class="odd" colspan="4" style="width: 3%;">2</th><th class="" colspan="4" style="width: 3%;">3</th><th class="odd" colspan="4" style="width: 3%;">4</th><th class="" colspan="4" style="width: 3%;">5</th><th class="odd" colspan="4" style="width: 3%;">6</th><th class="" colspan="4" style="width: 3%;">7</th><th class="odd" colspan="4" style="width: 3%;">8</th><th class="" colspan="4" style="width: 3%;">9</th><th class="odd" colspan="4" style="width: 3%;">10</th><th class="" colspan="4" style="width: 3%;">11</th><th class="odd" colspan="4" style="width: 3%;">12</th><th class="" colspan="4" style="width: 3%;">13</th><th class="odd" colspan="4" style="width: 3%;">14</th><th class="" colspan="4" style="width: 3%;">15</th><th class="odd" colspan="4" style="width: 3%;">16</th><th class="" colspan="4" style="width: 3%;">17</th><th class="odd" colspan="4" style="width: 3%;">18</th><th class="" colspan="4" style="width: 3%;">19</th><th class="odd" colspan="4" style="width: 3%;">20</th><th class="" colspan="4" style="width: 3%;">21</th><th class="odd" colspan="4" style="width: 3%;">22</th><th class="" colspan="4" style="width: 3%;">23</th>       </tr>

    </thead>    <tbody>     <tr>
            <td style="width: 28%;" class="alignRight">KE-832 BL - VW Golf</td><td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>

<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>

<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td colspan="34" class="highlighted" style="width: 25.5%;">Richard Knop</td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>

<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>

<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
        </tr>   </tbody>
</table>
<br><table class="CalendarReservationsBodyTable">
    <thead><tr><th colspan="97">Conference room</th></tr>       <tr>
            <th class="corner" style="width: 28%;"></th><th class="odd" colspan="4" style="width: 3%;">0</th><th class="" colspan="4" style="width: 3%;">1</th><th class="odd" colspan="4" style="width: 3%;">2</th><th class="" colspan="4" style="width: 3%;">3</th><th class="odd" colspan="4" style="width: 3%;">4</th><th class="" colspan="4" style="width: 3%;">5</th><th class="odd" colspan="4" style="width: 3%;">6</th><th class="" colspan="4" style="width: 3%;">7</th><th class="odd" colspan="4" style="width: 3%;">8</th><th class="" colspan="4" style="width: 3%;">9</th><th class="odd" colspan="4" style="width: 3%;">10</th><th class="" colspan="4" style="width: 3%;">11</th><th class="odd" colspan="4" style="width: 3%;">12</th><th class="" colspan="4" style="width: 3%;">13</th><th class="odd" colspan="4" style="width: 3%;">14</th><th class="" colspan="4" style="width: 3%;">15</th><th class="odd" colspan="4" style="width: 3%;">16</th><th class="" colspan="4" style="width: 3%;">17</th><th class="odd" colspan="4" style="width: 3%;">18</th><th class="" colspan="4" style="width: 3%;">19</th><th class="odd" colspan="4" style="width: 3%;">20</th><th class="" colspan="4" style="width: 3%;">21</th><th class="odd" colspan="4" style="width: 3%;">22</th><th class="" colspan="4" style="width: 3%;">23</th>      </tr>

    </thead>    <tbody>     <tr>
            <td style="width: 28%;" class="alignRight"></td><td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>

<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="w开发者_开发知识库idth: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>

<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td colspan="12" class="highlighted borderLeft" style="width: 9%;">Richard Knop</td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>

<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>

<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>

<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class=" borderLeft" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
<td class="" style="width: 0.75%;"></td>
<td class="odd" style="width: 0.75%;"></td>
        </tr>   </tbody></table>

</body>
</html>

Complimentary jsfiddle link: http://jsfiddle.net/77PqN/

This means that I have reserved a car for 16*15 minutes (that is 4 hours but the width is not correct):

<td colspan="16" class="highlighted">Richard Knop</td>

Try adding table-layout:fixed; to the table selector.

I know that this makes the layout for "Car" and "Buick" a bit weird, but you can probably fix those one by wrap them in a separate div container and then positionate them relative with a fixed width or something.

tbody>tr>td
{
width: 1%;
max-width: 1%;
}

On a 1280 x 106, all td's are of the size 11 x 40. However some of the 4rth td's are 10 x 40 because of the border-left: 1px;

Fiddle

继续阅读：csscss-tablesxhtml

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9