固定不规则行的HTML表格 [英] HTML table with fixed uneven rows
问题描述
我正在创建一个页面，允许用户从日程表中选择一个时隙.我宁愿使用某种表格布局(相对于使用下拉/组合框)来做到这一点.但是我很难确定要走哪条路，因为这样安排了时间表.
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.
因此M，W，F相同，T，TR相同.我希望使用某种表而不是纯图形来完成此操作，因为我希望能够更新显示在单元格中的信息.除了进行行跨度之外，还有没有其他方法来获得不均匀的布局(如图片)?还是我应该采取完全不同的方法.我所有的JavaScript需要知道的是在单元格中显示了哪些信息(文本)，以及正在单击哪个信息(文本).
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.
推荐答案
下面的代码是使用TABLE解决方案="nofollow noreferrer"> ROWSPAN 属性.仅依靠CSS来设置行高和列宽.
The code below is a TABLE solution using the ROWSPAN attribute. 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.
如果您改为尝试使用多个表或DIV/CSS驱动的解决方案，则可以使用Javascript为您重新对齐，但这很难正确实现.
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.
<html>
<head>
<style>
table{border-collapse:collapse;border-spacing:0}
td,th{border:1px solid #000}
.m,.w,.f{width:104px}
.t,.r{width:117px}
.r5{height:12px}
.r8{height:20px}
.r9{height:27px}
.r1,.r10,.r12,.r14{height:60px}
.r2,.r7,.r11,.r13{height:18px}
.r3,.r4,.r6{height:40px}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr class="r1">
<td class="m"></td>
<td class="t" rowspan="2"></td>
<td class="w"></td>
<td class="r" rowspan="2"></td>
<td class="f"></td>
</tr>
<tr class="r2">
<td class="m" rowspan="2"></td>
<td class="w" rowspan="2"></td>
<td class="f" rowspan="2"></td>
</tr>
<tr class="r3">
<td class="t" rowspan="3"></td>
<td class="r" rowspan="3"></td>
</tr>
<tr class="r4">
<td class="m"></td>
<td class="w"></td>
<td class="f"></td>
</tr>
<tr class="r5">
<td class="m" rowspan="2"></td>
<td class="w" rowspan="2"></td>
<td class="f" rowspan="2"></td>
</tr>
<tr class="r6">
<td class="t" rowspan="2"></td>
<td class="r" rowspan="2"></td>
</tr>
<tr class="r7">
<td class="m" rowspan="3"></td>
<td class="w" rowspan="3"></td>
<td class="f" rowspan="3"></td>
</tr>
<tr class="r8">
<td class="t"></td>
<td class="r"></td>
</tr>
<tr class="r9">
<td class="t" rowspan="3"></td>
<td class="r" rowspan="3"></td>
</tr>
<tr class="r10">
<td class="m"></td>
<td class="w"></td>
<td class="f"></td>
</tr>
<tr class="r11">
<td class="m" rowspan="2"></td>
<td class="w" rowspan="2"></td>
<td class="f" rowspan="2"></td>
</tr>
<tr class="r12">
<td class="t" rowspan="2"></td>
<td class="r" rowspan="2"></td>
</tr>
<tr class="r13">
<td class="m" rowspan="2"></td>
<td class="w" rowspan="2"></td>
<td class="f" rowspan="2"></td>
</tr>
<tr class="r14">
<td class="t"></td>
<td class="r"></td>
</tr>
</table>
</body>
</html>
这篇关于固定不规则行的HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
