8

我正在尝试用 HTML 和 Javascript 构建一个自定义日历，您可以在其中将任务从一天拖放到另一天。我想将第一列和最后两列设为固定宽度，并让剩余的列（周一到周五）保持流动，以便表格始终填满其父级的 100%。

我遇到的问题是，流体 TD 会根据其中的内容量自动调整自身大小，这意味着当我将一项任务从一天拖到另一天时，列宽会调整大小。我希望周一到周五的大小完全相同，无论内容如何，​​并且不设置 text-overflow:hidden; （因为任务总是需要可见）

即我希望灰色列固定宽度和红色列流动但彼此一致，无论它们中的内容如何。

编辑：我将 jQuery 用于拖放功能，因此 JavaScript 解决方案也可以（尽管不是优选的）。

JSFiddle 现场示例

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

4 回答 4

10

丹尼，

我想这就是你正在寻找的。

在这里摆弄 http://jsfiddle.net/T6YNK/22/

在 Chrome 中检查。

代码

                <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>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>

    <style type="text/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;
        }

        td,
        th        {
            overflow:hidden;
        }
    .fluid {

}
.weekend,
.row_header{
width:50px !important;

}

table{
    border: 1px solid black;
    table-layout: fixed;
    width:100%;

}
    </style>​
于 2012-07-16T16:04:23.020 回答
2

使用 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);
        })
    });
于 2012-07-16T15:56:19.437 回答
1

你能做到吗：

.fluid {
    width:10%;
}
于 2012-07-16T15:25:20.243 回答
1

仅使用 CSS 怎么样？

http://jsfiddle.net/T6YNK/16/

于 2012-07-16T15:57:02.220 回答