HTML表格 – 100％宽度表格,固定宽度和UNIFORM流体柱的组合

我正在尝试使用 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).

JSFiddle Live example

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 {
        ???
    }

解决方法

(注意：我给了表一个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);
        })
    });

（编辑：财气旺网 - 财气网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!