html - 帮我设计今天的日程表-6ren

html - 帮我设计今天的日程表

转载作者：行者123 更新时间：2023-11-28 03:45:54

更新:

我已经更新了我的 HTML。现在它适用于除 IE7 之外的所有浏览器。有任何想法吗？查看我更新的 HTML 和 jsFiddle 链接。

好的。我有一张表格，上面显示了我公司的汽车以及它们被预订的时间间隔。每小时分为四个部分 - 每 15 分钟间隔一次。

问题是我希望表格为 100% 宽，但代表 15 分钟间隔的单元格应具有相同的宽度。

一张图说明我的意思:

enter image description here

免费的 jsfiddle 链接:http://jsfiddle.net/77PqN/

只需将此 HTML 复制并粘贴到 index.html 文件中，然后在您的浏览器中查看它，希望您能理解我想要实现的目标(数字从 0 到 23 代表小时，每个 colspan 为 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 选择器。

我知道这会使“Car”和“Buick”的布局有点奇怪，但您可以通过将它们包装在单独的 div 容器中然后将它们相对于固定宽度或其他东西。

关于html - 帮我设计今天的日程表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6224746/

文章推荐： javascript - 谷歌图表按堆栈高度排序

文章推荐： html - Fancy Zoom (jQuery Plugin) 图像没有缩放效果

文章推荐： html - 设计第四级菜单项不起作用

文章推荐： javascript - 文本自动字体大小

user-interface - 交互设计、视觉设计、网页设计、UX 设计、UI 设计、UI 开发之间有什么区别？
关闭。这个问题需要更多focused .它目前不接受答案。想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
wpf - 仅适用于 VS 设计 View 的 Blend 中的 UnresolvedAssemblyException - 在 VS 设计 View 中工作正常
.NET 框架:4.5.1 我在 Blend for visual studio 2015 中遇到一个奇怪的错误，我找不到它的来源。如果我在 VS 中打开我的 WPF 解决方案，它会加载并运行良好。
web-services - RESTful URL 设计 : public vs private API, 层次结构 API 设计模式，URI 与 URL 设计？
我经常遇到这样的问题，与 Hierarchical RESTful URL design 非常相似假设该服务仅提供用户上传文档。 POST, GET /accounts PUT, DELETE /a
设计，无法登出
在 Rails 应用程序中，我使用 devise 来管理我的用户，而我用来销毁 session 的链接不再有效。它正在工作，现在我添加了事件管理员，但没有。我的链接是 :delete, :clas
设计:更改密码
我已经坚持了超过 24 小时，试图按照此处发布的其他解决方案进行操作，但我无法使其正常工作。我是 Rails 新手，需要帮助! 我想让我的/users/edit 页面正常工作，以便我可以简单地更改用户
设计 - 超时不起作用
Devise 在以下情况下不会使用户超时: 用户登录，关闭选项卡，然后在超时 + X 分钟内重新访问该 URL。用户仍处于登录状态。如果选项卡已打开并且稍后刷新/单击，则超时可以正常工作。这意味着
WPF slider 设计
我想使用这样的 slider 我希望该 slider 根据提供给它的值进行相应调整。到目前为止，我只能应用具有渐变效果的背景，但无法获得这种效果。请通过提供样式代码来帮助我。
WCF 设计 - 一个请求和响应对象还是多个？
您应该为每种方法创建一个请求/响应对象，还是应该为每个服务创建一个？如果我在所有方法中使用它，我的服务请求对象中将只有 5 个不同的东西，因为我对几乎所有方法使用相同的输入。响应对象将只有一个字典
RESTful 设计 - 如何为实体的附件建模
我正在尝试在 REST 中对实体的附件进行建模。假设一个缺陷实体可以附加多个附件。每个附件都有描述和一些其他属性(上次修改时间、文件大小...)。附件本身是任何格式的文件(jpeg、doc ...)
sql - 设计——第六范式
我有以下表格: Blogs { BlogName } BlogPosts { BlogName, PostTitle } 博客文章同时建模一个实体和一个关系，根据 6nf(根据第三个宣言)这是无效的。
OOP 设计 - 许多对象每个都与其他对象的有限子集具有独特的交互
如果 A 类与 B、C 和 D 类中的每一个都有唯一的交互，那么交互的代码应该在 A 中还是在 B、C 和 D 中？我正在编写一个小游戏，其中许多对象可以与其他对象进行独特的交互。例如，EMP点击
设计 + Omniauth + remember_me
关于如何记住我与 Omniauth 一起工作似乎有些困惑。根据这个wiki ，您需要在 OmniauthCallbacksController 中包含以下内容: remember_me(user)
multithreading - 将非线程安全组件与多线程组件一起使用(设计)
设计问题: 使用非线程安全组件(集合，API，...)在/带有多线程成分 ... 例子 : 组件 1 :多线程套接字服务器谁向消息处理程序发送消息... 组件 2 :非线程安全消息处理程序谁
XML 设计 - 如何？
我们目前正在设计一个 RESTful 应用程序。我们决定使用 XML 作为我们的基本表示。我有以下关于在 XML 中设计/建模应用程序数据的问题。在 XML 中进行数据建模的方法有哪些？从头开始然
XSD 设计 - 一个或多个规则
我正在设计一个新的 XSD 来从业务合作伙伴那里获取积分信息。对于每笔交易，合作伙伴必须提供至少一种积分类型的积分值。我有以下几点:
API 设计 - 最佳实践以及如何支持多个版本
设计支持多个版本的 API 的最佳方法是什么。我如何确保即使我的数据架构发生更改(微小更改)，我的 api 的使用者也不会受到影响？任何引用架构、指南都非常有用。最佳答案 Mark Nottingh
文件上传的 REST 设计
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
PHP 文件布局/设计
我想用 php 创建一个网站，其工作方式与 https://www.bitcoins.lc/ 相同。确实，就每个页面上具有相同布局但内容会随着您更改链接/页面而改变而言，我如何在 php 中使用lay
Java Swing 设计
我有一个关于编写 Swing UI 的问题。如果我想制作一个带有某些选项的软件，例如在第一个框架上，我有三个按钮(新建、选项、退出)。现在，如果用户单击新按钮，我想将框架中的整个内容更改为其他内容。
docker - Kubernetes建筑/设计/？
我正在尝试找出并学习将应用程序拥有的一堆Docker容器移至Kubernetes的模式和最佳实践。诸如Pod设计，服务，部署之类的东西。例如，我可以创建一个其中包含单个Web和应用程序容器的Pod，但

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 帮我设计今天的日程表