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

概述我正在尝试使用 HTML和 Javascript构建自定义日历,您可以将任务从一天拖放到另一天.我想将第一列和最后两列作为固定宽度并使剩余的列(周一到周五)流畅,以便表格总是填满其父级的100％. 我遇到的问题是流体TD根据其中的内容自动调整大小,这意味着当我将任务从一天拖到另一天时,列宽会调整大小.我希望周一到周五的大小完全相同,无论内容如何,​​也不设置文本溢出：隐藏; (因为任务总是需要可见 我正在尝试使用 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 >Row header</th>    <th >Mon</th>    <th >Tue</th>    <th >Wed</th>    <th >Thurs</th>    <th >Fri</th>    <th >Sat</th>    <th >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);        })    });

总结

以上是内存溢出为你收集整理的HTML表格 – 100％宽度表格,固定宽度和UNIFORM流体柱的组合全部内容，希望文章能够帮你解决HTML表格 – 100％宽度表格,固定宽度和UNIFORM流体柱的组合所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。