Question 419645 in Html Question posted in
Some basic documentation can be found here.

Html – why max-width not working on table with width of 100% and layout of fixed?

I created an HTML table with four columns. I want the third column to have a maximum width of 50px. However, the column width is not being applied as expected.

The table should take up 100% of the width of the container, with a fixed layout. Despite setting max-width: 50px for the third column, it seems to be ignored.

What might be causing this, and how can I fix it?

Here’s my code:

<html>
    <head>
        <style>
            table {
                border-bottom: 1px solid black;         
                border-right: 1px solid black;         
                border-collapse: collapse;  
                table-layout: fixed;
                width: 100%;
            }
            table td, table th {    
                border-left: 1px solid black;         
                border-top: 1px solid black;              
                border-bottom: none;    
                border-right: none;
            }
            table td:nth-child(3), table th:nth-child(3) {
                max-width: 50px;
                word-wrap: break-word;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
            </thead>
            <tbody>
                <tr>
                    <td>88</td>
                    <td>888888888888</td>
                    <td>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
                    <td>88888888</td>
                </tr>
                <tr>
                    <td>AA</td>
                    <td>AAAAAAAAAAAA</td>
                    <td>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
                    <td>AAAAAAAA</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
Tags:

2

Answers


  1. 0

    The max-width property does not work effectively for columns in a table when table-layout is fixed is applied. So for that you have to assign width:50px instead of max-width in table row and table header css

    <html>
    <head>
        <style>
            table {
                border-bottom: 1px solid black;         
                border-right: 1px solid black;         
                border-collapse: collapse;  
                table-layout: fixed;
                width: 100%;
            }
            table td, table th {    
                border-left: 1px solid black;         
                border-top: 1px solid black;              
                border-bottom: none;    
                border-right: none;
            }
            table td:nth-child(3), table th:nth-child(3) {
                width: 50px;
                word-wrap: break-word;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
            </thead>
            <tbody>
                <tr>
                    <td>88</td>
                    <td>888888888888</td>
                    <td>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
                    <td>88888888</td>
                </tr>
                <tr>
                    <td>AA</td>
                    <td>AAAAAAAAAAAA</td>
                    <td>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
                    <td>AAAAAAAA</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
    Login or Signup to reply.
  2. 0

    The issue arises because the table-layout: fixed; property in your CSS causes the browser to set column widths proportionally based on the table’s width and the content in the columns. When table-layout: fixed; is used, the browser does not dynamically adjust column widths to fit content or respect max-width. Instead, column widths are determined by the first row and the specified table width.

    Solution:

    To enforce a maximum width for the third column, you need to:

    1. Use the width property instead of max-width.
    2. Combine table-layout: fixed; with overflow: hidden; and text-overflow: ellipsis; to handle overflow.

    Here’s the updated code:

    <html>
    <head>
        <style>
            table {
                border-bottom: 1px solid black;
                border-right: 1px solid black;
                border-collapse: collapse;
                table-layout: fixed; /* Ensures fixed column widths */
                width: 100%; /* Occupy the full width of the container */
            }
            table td, table th {
                border-left: 1px solid black;
                border-top: 1px solid black;
                border-bottom: none;
                border-right: none;
                overflow: hidden; /* Prevent content from overflowing */
                text-overflow: ellipsis; /* Add ellipsis for overflowing text */
                white-space: nowrap; /* Prevent wrapping */
            }
            table td:nth-child(3), table th:nth-child(3) {
                width: 50px; /* Set a fixed width for the third column */
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Col1</th>
                    <th>Col2</th>
                    <th>Col3</th>
                    <th>Col4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>88</td>
                    <td>888888888888</td>
                    <td>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
                    <td>88888888</td>
                </tr>
                <tr>
                    <td>AA</td>
                    <td>AAAAAAAAAAAA</td>
                    <td>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
                    <td>AAAAAAAA</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

    Changes:

    1. width instead of max-width: table-layout: fixed; respects the width property, not max-width.
    2. Overflow handling:
      • overflow: hidden;: Ensures content that exceeds the column width is clipped.
      • text-overflow: ellipsis;: Adds ellipsis (...) for clipped content.
      • white-space: nowrap;: Prevents text from wrapping into multiple lines.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search