Flexible columns with dynamic maximum width based on percentage

Question

Flexible columns with dynamic maximum width based on percentage

After extensive research, I am turning to stackoverflow for help with a seemingly simple task that has proven difficult to achieve. I have three columns of expandable content and need them to adjust in size proportionally when one or more are expanded. Each column should have a maximum and minimum width set as either percentages or static values to prevent excessive squashing when expanding. The example code I attempted did not work due to max-width percentage limitations on table cells.

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

To address this issue without the use of frameworks or jQuery, I created a script that dynamically adjusts the maximum width of each column based on the container's width. This approach allows for smooth resizing transitions without relying on JavaScript. While this solution works for now, I am open to alternative methods that meet the specified requirements and possibly offer animated size transitions or further explanation of why percentage max-width does not work with TDs.

html css multiple-columns calculated-columns

Answer 1

Answer №1

Would you like to give it a shot?

There is an example provided for only one tr td.

You need to implement each function for this specific scenario.

Give it a try, you might get some inspiration..

Cascading Style Sheets

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

    </style>

JavaScript

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

HyperText Markup Language

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

Second Try

Ensure to include jQuery in your fiddle

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

Answer 2

Would you like to give it a shot?

There is an example provided for only one tr td.

You need to implement each function for this specific scenario.

Give it a try, you might get some inspiration..

Cascading Style Sheets

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

    </style>

JavaScript

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

HyperText Markup Language

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

Second Try

Ensure to include jQuery in your fiddle

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

Answer 3

Answer №2

To make widths dynamic using percentages and max-width, the parent element should have a specified width in pixels. This can be applied to either the table itself or a container div surrounding the table.

You can view the updated fiddle here: http://jsfiddle.net/qoaxxbqp/

In this update, both the container div and the table element have initial width settings as shown below:

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

If you only set a fixed width on the table without a parent container, or if you set a fixed width on the container div while using width:100% on the table, it is imperative to have a parent element with a fixed width (in this case, a table with % width).

I have also included jQuery hover functions to showcase the expansion effect.

Answer 4

To make widths dynamic using percentages and max-width, the parent element should have a specified width in pixels. This can be applied to either the table itself or a container div surrounding the table.

You can view the updated fiddle here: http://jsfiddle.net/qoaxxbqp/

In this update, both the container div and the table element have initial width settings as shown below:

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

If you only set a fixed width on the table without a parent container, or if you set a fixed width on the container div while using width:100% on the table, it is imperative to have a parent element with a fixed width (in this case, a table with % width).

I have also included jQuery hover functions to showcase the expansion effect.

Flexible columns with dynamic maximum width based on percentage

Answer №1

Answer №2

Similar questions

Learn to Generate a Mathematical Quiz with Javascript

Utilizing Jquery on the client side in conjunction with a Node.js server

Modify the color of CSS for all elements except those contained within a specific parent using jQuery

What is the process for assigning the value returned from an Angular HTTP request to ng-bind?

Incorporate new functions through the css class name "javafx"

Is there a way to use PHP to calculate the number of lines in an HTML code?

Bootstrap - Border padding excessively wide

Resizing images using a dynamic frame size

Ways to hide the value from being shown

Merge multiple echoes to create a single echoed string that is valid HTML

Creating your own personalized menu in PHP

Utilizing Bootstrap to create a row of four columns

Replicate the ctrl+/- function through coding

changing tooltip color in bootstrap based on the parent element

Prevent typing in text box when drawer is activated by pressing a button

The color of the progress bar in JS is not displaying properly

Access dynamic content from Tinymce 4.x without any manual effort

Refresh table in php without the need to reload the entire page

Recalling the layout following the user's computer restart

Having trouble aligning the divs