Home/ Questions/Q 5988525
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:58:13+00:00

UPDATE: I have updated my HTML. Now it works in all browsers except IE7.

  • 0

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:

enter image description here

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="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 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0