Помоги мне оформить расписание - PullRequest
Новая
       30

Помоги мне оформить расписание

2 голосов
/ 03 июня 2011

ОБНОВЛЕНИЕ:

Я обновил свой HTML.Теперь он работает во всех браузерах, кроме IE7.Есть идеи?Проверьте мои обновленные ссылки HTML и jsFiddle.

Хорошо.У меня есть таблица, которая показывает автомобили моей компании и временные интервалы, в течение которых они были зарезервированы.Каждый час делится на четыре части - каждый 15-минутный интервал.

Проблема в том, что я хочу, чтобы таблица имела ширину 100%, но ячейки, представляющие 15-минутные интервалы, должны иметь одинаковую ширину.

Рисунок, показывающий, что я имею в виду:

enter image description here

Бесплатная ссылка jsfiddle: http://jsfiddle.net/77PqN/

Просто скопируйте и вставьте этот HTML-файл в файл index.html и посмотритев вашем браузере, я надеюсь, вы поймете, чего я хочу достичь (числа от 0 до 23 часов, каждый из которых имеет colspan 4 и ниже, с четырьмя 15-минутными интервалами): 

<!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>

Бесплатный jsfiddleссылка: http://jsfiddle.net/77PqN/

Это означает, что я забронировал автомобиль на 16 * 15 минут (это 4 часа, но ширина указана неверно): 

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

Ответы [ 2 ]

0 голосов
/ 03 июня 2011 
tbody>tr>td
{
width: 1%;
max-width: 1%;
}

На 1280 x 106 все td имеют размер 11 x 40. Однако некоторые 4-е td имеют 10 x 40 из-за левой границы: 1px;

Fiddle

0 голосов
/ 03 июня 2011

Попробуйте добавить макет таблицы: исправлено; к селектору table.

Я знаю, что это делает расположение для "Car" и "Buick" немного странным, но вы, вероятно, можете исправить это, обернув их в отдельный контейнер div и затем расположив их относительно фиксированной ширины или что-то вроде этого. .

...