How do you make one column with a fixed width and another one with auto width in <table> using css?

Question

I am making a table with resizable columns and facing an issue I cannot resolve. I need to enable a user to drag the side of a column to resize it and reset the width if they want to. By resizing it, the user changes the width of each column in a table with table-layout set to fixed which works perfect but I cannot implement the reseting.

When a user resets one particular column it should be reset to the width of its content (meaning the width of its largest cell, the thing you get if you set table-layout to auto). I don't understand how to achieve it preserving the width of other columns.

For example, if there are two columns: A and B. With table-layout set to auto, A is 200px in width and B is 250px in width. The user cannot resize the columns with table-layout set to auto because the width of a column won't go below its minimum, so I set table-layout to fixed. Now the user can resize them, say, to 100px for A and 150px for B. What should I do when the user wants to reset the column B to match the width of its content? I cannot set table-layout back to auto because it would affect the column A. I also cannot set the width of B back to 250px because, possibly, the content could have changed by the user. I cannot set width to auto because it doesn't work with table-layout being fixed.

All I can think of is, using js, set table-layout to auto, get the width of the column B and save it, switch table-layout back to fixed and set the column B to the saved width. But, come on, this solution does not look any good.

If that helps, I am using the table from ant-design

Mahesh Prajapati · Accepted Answer · 2023-12-21 09:51:16Z

0

As per your requirement I have created an example I hope this HTML table structure will be useful for you.

table {
          border-collapse: collapse;
          table-layout: fixed;
          width: 100%;
        }

        table th{
            background-color: antiquewhite;
        }
      
        table, th, td {
          border: 1px solid #000; /* Add a 1px border to the table, th, and td elements */
          padding: 10px;
        }

<table id="resizable-table">
        <colgroup>
          <col style="width: 100px;" />
          <col style="width: auto;" />
          <col style="width: 150px;" />
        </colgroup>
        <thead>
          <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column A</td>
                <td>Column B</td>
                <td>Column C</td>
            </tr>
        </tbody>
      </table>

edited Dec 21, 2023 at 9:51

answered Dec 21, 2023 at 7:45

Mahesh Prajapati

6774 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew Slock Over a year ago

Thanks but I don't see how it is any useful. You specifically set the width of every column to a fixed number. How do you now set the width to auto of, say, the column B preserving the width of the other columns?

Mahesh Prajapati Over a year ago

As per your question I have made some changes in the code. Please check again...

Andrew Slock Over a year ago

thanks again but you didn't understand what I am trying to achieve. In your example, the column B is taking all available space, but want it to adjust the width to its content as if table-layout was set to auto

Collectives™ on Stack Overflow

How do you make one column with a fixed width and another one with auto width in <table> using css?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related