locked
Dynamic table column width with long truncated text RRS feed

  • Question

  • User363578564 posted

    the table has 3 columns, 1st and 3rd column are fixed width, 2nd should be at its max width at different monitor sizes so as to show as many as possible.

    but text in 2nd column may be very long, should be truncated

    Can I do it by CSS?  of further with javascript to calculate the screen size?

    I tried to change 2nd column width to <td style="width:100%;.....>

    it is very good with short text (my target look) but very bad at long text, expand the whole HTML page indefinitely.

    Any help?  thanks

    *****************************************************

    <html><body>

    <table style="border:1px solid black">

    <tr><td style="width:200px">ABC</td>  <td style="max-width:500px;overflow:hidden;text-overflow:ellipsis"><div style="white-space: nowrap;">The documents and related graphics published on the  Store or Services could include technical inaccuracies or typographical errors. Changes are periodically added to the information herein. and/or its respective suppliers may make improvements and/or changes in the product(s) and/or the program(s) described herein at any time</div></td>  <td style="width:300px">XYZ</td> </tr>

    <tr>  <td>AAAA</td>  <td>BBBB</td>  <td>CCCC</td> </tr> </table>

    </body></html>

    Monday, November 7, 2016 8:14 AM

All replies

  • User527778624 posted

    Hi,

    Try this code:

    <html><body>
    
    <table style="border:1px solid black" border="1" width="100%">
    
    <tr><td style="max-width:200px">ABC</td>  <td style="max-width:500px;overflow:hidden;text-overflow:ellipsis"><div style="white-space: nowrap;">The documents and related graphics published on the  Store or Services could include technical inaccuracies or typographical errors. Changes are periodically added to the information herein. and/or its respective suppliers may make improvements and/or changes in the product(s) and/or the program(s) described herein at any time</div></td>  <td style="max-width:300px">XYZ</td> </tr>
    
    <tr>  <td>AAAA</td>  <td>BBBB</td>  <td>CCCC</td> </tr> </table>
    
    </body></html>

    Monday, November 7, 2016 10:22 AM
  • User363578564 posted

    Hi

    Possible to keep width of 1st Column and 3rd column fixed and unchanged?  thanks.

    Monday, November 7, 2016 11:38 AM
  • User363578564 posted

    i think my explanation is not good.

    Please ignore this post.  thx.

    Tuesday, November 8, 2016 2:09 AM
  • User-707554951 posted

    Hi TW88,

    For your problem, I suggest you could try the code below:

        <style type="text/css">
            table {
                border-collapse: separate;
                width: 100%;
                border: 1px solid black;
                table-layout: auto;
            }
    
            .td1 {
                border: 1px solid black;
                width:200px;
                max-width:200px;
                min-width:200px;
            }
    
            .td2 {
                border: 1px solid black;
                width:auto;
                max-width:300px;
                overflow-x:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
            }
    
            .td3 {
                border: 1px solid black;
                width:300px;
                max-width:300px;
                 min-width:300px;
            }
        </style>
    
                <table>
                    <tr>
                        <td class="td1">ABC</td>
                        <td class="td2">
                            <div style="width:inherit; overflow-x: hidden; text-overflow:ellipsis">The documents and related graphics published on the  Store or Services could include technical inaccuracies or typographical errors. Changes are periodically added to the information herein. and/or its respective suppliers may make improvements and/or changes in the product(s) and/or the program(s) described herein at any time</div>
                        </td>
                        <td class="td3">XYZ</td>
                    </tr>
                    <tr>
                        <td class="td1">AAAA</td>
                        <td class="td2">BBBB</td>
                        <td class="td3">CCCC</td>
                    </tr>
                </table>
    

    Fiddle:

    http://jsfiddle.net/7CURQ/154/

    Best regards
    Cathy

    Tuesday, November 8, 2016 7:52 AM