具有固定不均匀行的 HTML 表格
我正在创建一个页面，允许用户从时间表中选择一个时间段。我更喜欢使用某种表格布局来做到这一点（而不是使用下拉/组合框）。但我很难弄清楚该走哪条路，因为时间表是这样安排的。 
所以 M、W、F 是相同的，T、TR 是相同的布局。我希望使用某种表格而不是纯图形来完成此操作，因为我希望能够更新单元格中显示的信息。除了进行行跨度之外，还有其他方法可以得到如图所示的不均匀布局吗？或者我应该采取完全不同的方法。我的 JavaScript 需要知道的是单元格中显示的信息（文本）以及正在单击的信息（文本）。
I'm creating a page that allows the user to select a time slot from a schedule. I would prefer to do this with some sort of table layout (vs. using drop down/combo boxes). But I'm having trouble figuring out which path to take because the schedule is layed out like this.
So M,W,F are the same and T,TR are the same layout. I was hoping to do this with some sort of table instead of pure graphic because I want to be able to update information displayed in the cells. Is there a method other than doing rowspans to get the uneven layout like the picture. Or should I take a completely different approach. All my javascript needs to know is what information(text) is displayed in the cell and which one is being clicked.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
下面的代码是使用
ROWSPAN属性。 CSS 仅用于设置行高和列宽。这种方法的一大优点是，任何垂直扩展的单元格都会导致整行扩展相同的量，因此您的列和行永远不会错位。
如果您尝试使用多个表或 DIV/CSS 驱动的解决方案，您可以使用 Javascript 为您重新调整内容，但这可能很难正确实现。
The code below is a
TABLEsolution using theROWSPANattribute. CSS is only relied on for setting row heights and column widths.The big advantage to this approach is that any cells that expand vertically will cause the entire row to expand the same amount, so your columns and rows will never get misaligned.
If you instead try a to use more than one table, or a DIV/CSS-driven solution, you can use Javascript to realign things for you, but this can be quite difficult to implement correctly.
这是一个使用 CSS 的示例：
http://jsfiddle.net/byQHE/
它并不完美，但它给出了你知道你能做什么。
Here is an example using CSS:
http://jsfiddle.net/byQHE/
It's not perfect, but it gives you an idea of what you can do.