logo标签列表

HTML表格- 100%宽度表格，固定宽度和统一流式列的组合

htmlcsshtml-tablefluid
8
我正在尝试使用HTML和Javascript构建自定义日历，您可以在其中将任务从一天拖到另一天。我希望第一列和最后两列具有固定宽度，并且剩余的列（从星期一到星期五）是流动的，以便表格始终填满其父元素的100％。
我的问题是，流动TD会根据其中包含的内容自动调整大小，这意味着当我将任务从一天拖到另一天时，列宽会重新调整。我希望星期一到星期五的宽度始终相同，而不考虑其中的内容，也不设置text-overflow:hidden;（因为任务始终需要可见）
即我想要灰色列具有固定宽度，红色列是流动的但彼此之间的宽度是相同的，而不考虑其中的内容。
编辑：我正在使用jQuery进行拖放功能，因此JavaScript解决方案也可以（尽管不是首选）。 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 {
        ???
    }
1
非常好的问题。我不确定是否可以使用纯CSS完成。您可能需要利用JavaScript来计算表格的总宽度，并相应地应用样式。 - Madara's Ghost
4个回答
10

Danny，

我认为这就是你要找的内容。

这里有演示 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>​
1
最佳答案，仅使用CSS而不是jQuery。 - Jeff B.
2
使用jQuery（可能也可以使用常规JS，但我更喜欢用它来处理这种工作）：
（注：我给表格设置了一个ID，以便更容易地选择，如果稍微做些调整，也可以不使用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);
        })
    });
是的，那让我们非常接近了。不幸的是，在非常小的分辨率下它仍然崩溃。也许我需要意识到浏览器正在试图帮助我，并在表格部分上放置一个中等宽度以避免极端情况。 - Danny
1

你能否做到：

.fluid {
    width:10%;
}
这对我似乎不起作用。.row_header和.weekend上的宽度似乎被忽略了，在小分辨率下，它仍然不均匀地调整列的宽度。 示例在此处 - Danny
你能否使用媒体查询，然后相应地更改百分比呢？ - ColWhi
那会有什么帮助呢？你能给我举个例子吗？ - Danny
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接