Ответственные столбцы с процентной максимальной шириной

Question

Что мне нужно, это очень просто или, по крайней мере, должно быть, но после нескольких дней исследований я пришел, чтобы обратиться к stackoverflow, если кто-нибудь действительно знает, как это сделать ..

У меня есть 3 столбца контента, все из которых имеют расширяемый контент внутри. Ни один контент не очень широк, но он много (раз расширился). Мне нужно сделать это, чтобы при расширении содержимого в одном столбце он сокращал два других столбца до определенной суммы, и когда вы расширяете содержимое двух столбцов, оно выравнивается и т. Д. Затем столбцы должны иметь процент максимальный размер и минимальный размер (в процентах или статический), поэтому, когда столбцы расширяются, они не полностью сквовают остальные, и поэтому я могу установить максимальную «расширяемость» для каждого столбца. Ради простоты, вот пример, который бы мог сделать трюк, если только она работала:

<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> 

Приведенный выше код не работает, конечно, но я уверен, что вы можете себе представить, как это будет работать если бы это произошло. Это именно то, что мне нужно, только то, что max-width по какой-то причине не работает с процентами по TD. Если вам нужна лучшая визуализация, я сделал скрипку, чтобы помочь проиллюстрировать проблему здесь: http://jsfiddle.net/m5xgcf3s/

Я не могу просто использовать минимальную ширину столбцов из-за характера содержимого, все они должны быть расширяемыми, но только определенная сумма. Я открыт для любого решения и любым способом сделать это, он не обязательно должен быть таблицей (это просто, что ширина и выравнивание TD в таблице по умолчанию отличная, если только она поддерживает процент максимальной ширины) или что угодно, если оно отвечает требованиям и не использует рамки (которые, надеюсь, в любом случае не нужны). Бонус, если он вообще не использует javascript, но БОЛЬШОЙ БОНУС, если вы найдете решение, которое допускает плавный анимированный размерный переход, все еще отвечающий требованиям. Также бонус, если вы можете объяснить мне, почему, черт возьми, максимальная ширина в процентах не работает на ячейках таблицы ...

Спасибо за помощь, ребята, но я сделал сценарий, который решил его я ... НЕТ фреймворков, НИКАКИХ jQuery, НИКАКИХ хаков, просто дайте TDs 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> 

Это имитирует процент макс ширины путем расчета доли ширины контейнера каждый раз, когда ее изменения размера (в данном случае контейнер 100% ширина из фрейма). Я оставлю вопрос без ответа, хотя любой пользователь может придумать другой ответ (с таблицей или без нее), надеюсь, тот, который разрешает анимацию перехода по ширине, или действительное объяснение того, почему процентная максимальная ширина не работает на TDs

Answer 1

Вы можете попробовать?

Я сохранил пример только для одного тр.

Вы должны выполнять каждую функцию для этого случая.

попробуйте, у вас будет какая-то идея ..

Css

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

    </style>  

Script

<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, поэтому в этом случае он должен быть либо в элементе таблицы, либо в элементе таблицы контейнера таблицы ,

Я обновил скрипку здесь: http://jsfiddle.net/qoaxxbqp/

это обновление как начальные значения ширины устанавливается на контейнер DIV, а также элемент таблицы, как в:

<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 контейнера и ширину использования: 100% на таблице. В любом случае, но родительский/немедленный родительский родитель с фиксированной шириной (таблица с% шириной в этом случае).

Я также добавил функции ввода/вывода jquery для демонстрации расширения.