我正在尝试使用
HTML和
Javascript构建自定义日历,您可以将任务从一天拖放到另一天.我想将第一列和最后两列作为固定宽度并使剩余的列(周一到周五)流畅,以便表格总是填满其父级的100％.
我遇到的问题是流体TD根据其中的内容自动调整大小,这意味着当我将任务从一天拖到另一天时,列宽会调整大小.我希望周一到周五的大小完全相同,无论内容如何,也不设置文本溢出：隐藏; (因为任务总是需要可见)
即我希望灰色列固定宽度,红色列流动但彼此均匀,无论其中的内容如何.
Edit: I’m using jQuery for the drag and drop functionality so a JavaScript solution would also be OK (although not preferable).
HTML：
<table>
<tr>
<th class="row_header">Row Header</th>
<th class="fluid">Mon</th>
<th class="fluid">Tue</th>
<th class="fluid">Wed</th>
<th class="fluid">Thurs</th>
<th class="fluid">Fri</th>
<th class="weekend">Sat</th>
<th class="weekend">Sun</th>
</tr>
<tr>
<td>Before Lunch</td>
<td>This col will be wider than the others because it has lots of content...</td>
<td></td>
<td></td>
<td></td>
<td>But I would really like them to always be the same size!</td>
<td></td>
<td></td>
</tr>
</table>
CSS：
table {
width: 100%;
}
td,th {
border:1px solid black;
}
th {
font-weight:bold;
background:red;
}
.row_header {
width:50px;
background:#ccc;
}
.weekend {
width:100px;
background:#ccc;
}
.fluid {
???
}
解决方法
使用jQuery(可能也可以使用常规JS,但我更喜欢这种工作)：
(注意：我给了表一个ID,所以它更容易选择,可以在没有它的情况下进行一些修补)
$(function() {
var $my_table = $("#my_table"),current_width = $my_table.width(),fluid_columns = $("table .fluid"),spread_width = (current_width - 150) / fluid_columns.length;
fluid_columns.width(spread_width);
$(window).on("resize",function() {
current_width = $my_table.width();
spread_width = (current_width - 150) / fluid_columns.length;
fluid_columns.width(spread_width);
})
});
