更新:
我已经更新了我的HTML。现在它可以在除IE7之外的所有浏览器中工作。有什么想法吗?查看我更新的HTML和jsFiddle链接。
好吧。我有一张桌子,上面有我公司的汽车和预定的时间间隔。每小时分为四个部分,每间隔15分钟。
问题是,我希望表的宽度为100%,但表示15分钟间隔的单元格的宽度应该相同。
一张照片显示了我的意思:
免费的jsfiddle链接:http://jsfiddle.net/77PqN/
只需将此HTML复制到index.HTML文件中并在浏览器中查看它,希望您能理解我想要实现的目标(从0到23个重复发送小时,每个重复发送小时数为4,下面是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>
最佳答案
尝试将table layout:fixed;添加到table
选择器。
我知道这使得“汽车”和“别克”的布局有点奇怪,但是你可以把它们包装在一个单独的容器里,然后用固定的宽度或其他东西来定位它们。
关于html - 帮我设置这一天时间表的样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6224746/