Question

我需要的是非常简单，或至少它应该是，但经过几天的研究后，我开始诉诸于stackoverflow，如果有人真的知道如何做到这一点......

我有3列内容，所有内容都有可扩展的内容。所有内容都不是很广泛，但它很丰富（一旦扩展）。我需要这样做，以便当您在一列中展开内容时，它会将其他两列缩小到一定数量，当您展开两列的内容时，它会均匀化等等。然后，列必须具有百分比max-size和min-size（百分比或静态），这样当列扩展时，它们不会完全挤压其他列，因此我可以为每列设置最大“可扩展性”。为简单起见，这里有一个将完成技巧的例子，只要它有效：

<table width="100%"><tr>
<td style="min-width:200px; max-width:60%;">Col1ExpandableContent</td>
<td style="min-width:200px; max-width:50%;">Col2ExpandableContent</td>
<td style="min-width:200px; max-width:40%;">Col3ExpandableContent</td>
</tr></table>

上面的代码当然不起作用，但我相信你可以想象它是如何工作的。这正是我所需要的，只是因为某种原因，最大宽度不能与TD上的百分比一起使用。如果您需要更好的可视化，我在这里帮助说明了问题：http://jsfiddle.net/m5xgcf3s/

由于内容的性质，我不能只使用cols的最小宽度，它们都需要可扩展但只需要一定量。我打开任何解决方案和任何方式这样做，它不需要是一个表（只是表格中的TD宽度和对齐默认是完美的，如果它只支持最大宽度百分比）或任何东西，只要它符合要求，不使用框架（希望不管怎样都不需要）。奖金，如果它根本不使用javascript，但如果你找到一个允许平滑动画大小过渡同时仍然满足要求的BIG BONUS。如果你可以向我解释为什么最大宽度百分比对表格单元格不起作用，也会给你带来好处......

感谢帮助人员，但我制作了一个自己解决它的脚本...没有框架，没有jQuery，没有黑客，只是给TD一个id并输入这段代码;

<script type="text/javascript">
      window.onresize=function setTDmaxwidth() {
      var containerwidth = window.innerWidth;
        if (containerwidth >= 400 ) {                                                                                                   
            document.getElementById("col1").style.maxWidth=( ( containerwidth * 0.6 )+'px');
            document.getElementById("col2").style.maxWidth=( ( containerwidth * 0.5 )+'px');
            document.getElementById("col3").style.maxWidth=( ( containerwidth * 0.4 )+'px');
        } else {  }
    }
</script>

它通过计算每次大小更改时容器宽度的一小部分来模拟最大宽度百分比（在这种情况下，容器是iframe宽度的100％）。虽然任何人想出另一个答案（有或没有表），我会留下未回答的问题，希望有一个允许宽度过渡动画，或有效解释为什么百分比max-width不适用于TDs < / p>

Answer 1

你可以尝试一下吗？

我只保留了一个例子。

你必须为这种情况做每个功能。

试试吧，你会有一些想法......

的CSS

    <style type="text/css">
        td { border: 1px solid black; }

    </style>

脚本

    <script>
    function onLoadFunction(){
        if(($(".tdFirst div").text().length)<100){
            $(".tdFirst div").css('width','200px'); // min width
        } else if(($(".tdFirst div").text().length)>=400) {
            $(".tdFirst div").css('width','400px'); //max width
        } else {
            $(".tdFirst div").css('width',$(".tdFirst div").text().length+'px'); //width auto adjust 
        }
    }
    </script>

HTML

    <body onLoad="onLoadFunction()">
        <table>
            <tr>
                <td align="center"class="tdFirst">
                    <div>
                        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
                    </div>
                </td>
                <td><p>testing...</p></td>
            </tr>
        </table>
    </body>

尝试＃2

脚本在你的小提琴中使用jQuery

    $('document').ready(function(){
        $(".tdFirst div").each(function(){
            if(($.trim($(this).text()).length)<50){
                $(this).css('width','20px'); // min width
            } else if(($.trim($(this).text()).length)>=60) {
                $(this).css('width','60px'); //max width
            } else {
                $(this).css('width',$.trim($(this).text()).length+'px'); //width auto adjust 
            }
        });
    });

Answer 2

要使用百分比和最大宽度将宽度设置为动态，父级应具有固定宽度（以px表示），因此在这种情况下，它必须位于table元素或table元素的容器div上。

我在这里更新了小提琴：http://jsfiddle.net/qoaxxbqp/

此更新在容器div和table元素上都设置了初始宽度，如下所示：

<div  style="width:600px;border:2px blue solid;" >
   <table width="500px"><tr>
    <td style="min-width:100px; max-width:60%;">Col1ExpandableContent</td>
    <td style="min-width:100px;max-width:50%;">Col2ExpandableContent</td>
    <td style="min-width:100px; max-width:40%;">Col3ExpandableContent</td>
   </table>
</div>

您最初只将表设置为固定宽度而没有父容器，或者在容器div上设置固定宽度并在表上使用width：100％。无论哪种方式，但父级/直接父级的父级具有固定宽度（在这种情况下，表格的宽度为％）。

我还添加了一个jquery悬停输入/输出功能来演示扩展。

响应列，最大宽度百分比

2 个答案: