这是一个小提琴我做过:
https://jsfiddle.net/cjtvvwrq/2/
这是小提琴的HTML和CSS:
HTML:
<div id="container">
<table id="outerTable">
<thead>
<tr>
<th colspan="2">Monday</th>
<th colspan="2">Tuesday</th>
<th colspan="2">Wednesday</th>
<th colspan="2">Thursday</th>
<th colspan="2">Friday</th>
<th colspan="2">Saturday</th>
<th colspan="2">Sunday</th>
</tr>
<tr>
<th class="thead-cell" colspan="2">
<table style="width: 100%;">
<tbody>
<tr>
<td>Morning</td>
<td>Afternoon</td>
</tr>
</tbody>
</table>
</th>
<th class="thead-cell" colspan="2">
<table style="width: 100%;">
<tbody>
<tr>
<td>Morning</td>
<td>Afternoon</td>
</tr>
</tbody>
</table>
</th>
<th class="thead-cell" colspan="2">
<table style="width: 100%;">
<tbody>
<tr>
<td>Morning</td>
<td>Afternoon</td>
</tr>
</tbody>
</table>
</th>
<th class="thead-cell" colspan="2">
<table style="width: 100%;">
<tbody>
<tr>
<td>Morning</td>
<td>Afternoon</td>
</tr>
</tbody>
</table>
</th>
<th class="thead-cell" colspan="2">
<table style="width: 100%;">
<tbody>
<tr>
<td>Morning</td>
<td>Afternoon</td>
</tr>
</tbody>
</table>
</th>
<th class="thead-cell" colspan="2">
<table style="width: 100%;">
<tbody>
<tr>
<td>Morning</td>
<td>Afternoon</td>
</tr>
</tbody>
</table>
</th>
<th class="thead-cell" colspan="2">
<table style="width: 100%;">
<tbody>
<tr>
<td>Morning</td>
<td>Afternoon</td>
</tr>
</tbody>
</table>
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
<div class="" style="padding: 0">
<table class="cell-table" style="table-layout: fixed;">
<tbody>
<tr style="height: 5px;"></tr>
<tr>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
</div>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td colspan="2" class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td colspan="2" class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
<div class="" style="padding: 0">
<table class="cell-table" style="table-layout: fixed;">
<tbody>
<tr style="height: 5px;"></tr>
<tr>
<td class="team-cell">
<div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
<div class="badge">TEXT</div>
</div>
</td>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
</div>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td colspan="2" class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
<div class="" style="padding: 0">
<table class="cell-table" style="table-layout: fixed;">
<tbody>
<tr style="height: 5px;"></tr>
<tr>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
</div>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td colspan="2" class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
<div class="" style="padding: 0">
<table class="cell-table" style="table-layout: fixed;">
<tbody>
<tr style="height: 5px;"></tr>
<tr>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td colspan="2" class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
<div class="" style="padding: 0">
<table class="cell-table" style="table-layout: fixed;">
<tbody>
<tr style="height: 5px;"></tr>
<tr>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
</div>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td colspan="2" class="team-cell">
<div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
<div class="" style="padding: 0">
<table class="cell-table" style="table-layout: fixed;">
<tbody>
<tr style="height: 5px;"></tr>
<tr>
<td class="team-cell">
<div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </div>
<div class="badge">TEXT</div>
</div>
</td>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td colspan="2" class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td colspan="2" style="padding: 2px; background-color: #006CCC" class="cell">
<div class="" style="padding: 0">
<table class="cell-table" style="table-layout: fixed;">
<tbody>
<tr style="height: 5px;"></tr>
<tr>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
<td class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td colspan="2" class="team-cell">
<div>
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#container {
padding: 15px;
}
table {
border-collapse:collapse;
}
#outerTable {
margin: 0 20px;
width: 100%;
}
th, td {
background: white;
border: 1px solid #dddddd;
color: #ccc;
padding: 8px;
}
.thead-cell {
padding: 0;
}
.thead-cell td {
border-top: none;
border-bottom: none;
border-right: none;
}
.thead-cell tr td:first-child {
border-left-color: transparent;
}
.badge {
display: inline-block;
background-color: #f89406;
color: white;
border-radius: 4px;
padding: 3px 5px;
margin-bottom: 2px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
border: 1px solid #8E6B2A;
font-size: 11px;
white-space: nowrap;
}
我使用了一些嵌套表,因为我认为它会起作用,但是HTML结构可能会改变。
基本上我想要的是让每天的Morning
和Afternoon
单元格始终具有相应边的最宽td.team-cell
的宽度({{1}的右边) },留给Afternoon
)星期几。
如果您在Morning
查找示例,最宽的团队单元格是右侧第二个,那么我希望Monday
具有相同的宽度以保持{{1}与Afternoon
同步。
我希望它看起来像这样(我已经用thead
填充tbody
,当然这不是解决方案):
在这种情况下,最知名的方法,最佳做法是什么?
感谢您的关注。
答案 0 :(得分:1)
如果希望单元格在行上具有相同的宽度,则应避免在每行中使用嵌套表格。 为什么已经尝试使用colspan(对于工作日来说它是有道理的)。但其余的方法没有任何意义。摆脱嵌套表 - 只有一个表和普通表格单元格中的所有数据都可以实现。
认为你可以自己做吗?或者我应该帮你解决你的dom结构?
就像展示:https://jsfiddle.net/cjtvvwrq/7/
<div id="container">
<table id="outerTable">
<thead>
<tr>
<th colspan="2">Monday</th>
<th colspan="2">Tuesday</th>
<th colspan="2">Wednesday</th>
<th colspan="2">Thursday</th>
<th colspan="2">Friday</th>
<th colspan="2">Saturday</th>
<th colspan="2">Sunday</th>
</tr>
<tr>
<td>Morning</td>
<td>Afternoon</td>
<td>Morning</td>
<td>Afternoon</td>
<td>Morning</td>
<td>Afternoon</td>
<td>Morning</td>
<td>Afternoon</td>
<td>Morning</td>
<td>Afternoon</td>
<td>Morning</td>
<td>Afternoon</td>
<td>Morning</td>
<td>Afternoon</td>
</tr>
</thead>
<tbody>
<tr>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
</tr>
<tr>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td colspan="2" class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td>
<td class="cell">
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">TEXT</div>
</div>
<div class="team-cell">
<div class="badge">TEXT</div>
<div class="badge">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</div>
</div>
</td> </tr>
</tbody>
</table>
</div>
并尝试避免内联样式,并通过类和单独的css-block /文件来完成。