What is the best way to create a table in CSS where one column has a fixed width and the other column adjusts automatically?

Currently, I am trying to create a table with resizable columns but have encountered a challenging issue. I want to allow the user to drag the side of a column to resize it and reset the width if needed. The problem arises when I need to reset one particular column to match the width of its content while maintaining the widths of the other columns in a table where table-layout is set to fixed.

When a user resets a specific column, it should revert to the width of its largest cell (similar to setting table-layout to auto). However, implementing this without affecting the widths of the other columns has proven to be quite challenging for me.

For instance, let's say there are two columns: A and B. Initially, with table-layout set to auto, column A is 200px wide, and column B is 250px wide. After allowing resizing with table-layout set to fixed, the user adjusts column A to 100px and column B to 150px. So, how can I enable the user to reset column B to match its content width without impacting column A or risking any changes in content?

My current solution involves temporarily switching table-layout to auto using JavaScript, retrieving the width of column B before saving it, reverting table-layout back to fixed, and then applying the saved width to column B. Although functional, I acknowledge that this approach may not be the most elegant one.

As a side note, I am utilizing the table component from ant-design in my project.

htmlcsshtml-tableantdcss-tables

Answer №1

Based on your specifications, I have put together an example of an HTML table structure that may be helpful 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The pictures are not showing up in the photo album

I am currently in the process of building a swim image gallery inspired by the Flex Panel Gallery project from Javascript30 (Repo Link). Upon previewing the site in a browser, I encountered an issue where the images extend beyond the frame, leaving only t ...

javascripthtmlcssflexboximage-gallery

Dynamic HTML text colors that change rapidly

I have an interesting question to ask... Would it be possible to create text that switches between two colors every second? For example, could the text flash back and forth between red and grey? I don't mean changing the background color, I mean act ...

javascripthtmlfontscolors

What is the best way to fill in columns with data, adding one entry per column each time and repeating the process in a loop?

I am looking to display multiple posts on a page within 3 columns: column 1 | column 2 | column 3 | The desired outcome is: column 1 | column 2 | column 3 | post1 post2 post3 post4 post5 post6 ... For instance, the HTML code appe ...

phpjqueryhtmlforeachmultiple-columns

Tips for achieving a blurred background image effect when hovering, while keeping the text unaffected

Hey there, I've recently started my journey into web development and have encountered a roadblock. I'm trying to blur the background image of a div on hover without affecting the text inside. I have an id called c1 where I used a javascript func ...

javascriptcssimagetextblur

Replacing the content of li elements

I have come up with a code snippet that generates li elements with input values after submitting the form. However, there is an issue where if you start typing in the input field again, it will overwrite all existing li elements. import './App.css&apo ...

htmlcssreactjs

Seeking assistance with creating a form that is centered on the page

As a newcomer here, I am in the process of learning new things. My current challenge is to create a center form. Here is what I have experimented with so far: <!doctype html> <html lang="en> <head> <meta charset="utf-8"> &l ...

htmlcssbootstrap-5

PHP - Working with Regular Expressions in Improperly Formatted

Struggling with Regex has always been a challenge for me, especially when I need to extract content from a malformed piece of code like the option tag. The website where this code is obtained from has poor programming and inconsistent label structures: I& ...

phphtmlregexpreg-match-all

What is the best way to set up pagination for my table?

I need assistance with implementing a searching functionality for my table using pagination. I believe JQuery will be necessary for this task. Can anyone recommend tutorials that may be helpful? My project is based on C# and MVC, so those resources could a ...

jqueryhtml

One way to retrieve form data in a controller when using serialization in an AJAX request is by accessing the

When using (#myForm).serialaize() in an ajax call for form submission, how can the form data be accessed in the controller? What does the representation of form data look like in the controller? $('#myForm').on('submit', function(e){ ...

htmlajaxmodel-view-controllercontroller

Unable to adjust the text color to white

As someone who is new to Typescript, I'm facing a challenge in changing the text color to white and struggling to find a solution. I'm hoping that someone can guide me in the right direction as I've tried multiple approaches without success ...

csstypescriptmaterial-ui

Utilizing Google ReCaptcha and the Parsley validation library

I need to ensure that users cannot submit a form without completing the captcha field. How can I achieve this using Parsley.js? Which field should be marked as required? In my ASP.NET Razor webpage, I have a JavaScript callback function that validates the ...

jqueryhtmlasp.netrecaptchaparsley.js

What is preventing hover from working correctly?

I'm having trouble getting images to display when hovering over text. Can anyone offer suggestions on what might be causing this issue? The images are being downloaded when clicked, so I know they're in the correct path. I've checked for com ...

jquerycsspdfhovermouseover

The width of table columns is altered upon the second rendering in JQuery DataTables

Is there a way to prevent JQuery DataTables cells from extending width after adding hyperlink to cell? I am facing an issue where I have two tables on the same page. The first table column has a link which populates the second table. It works fine when th ...

htmljquerycssajaxdatatables

Gleaming personalized select input/selectize input

I am striving to customize my Shiny select input in the following ways: Eliminate the label Set a unique background color: #2f2d57 Include a placeholder Enable users to both type-in and select Despite my efforts, I have not been successful in alignin ...

javascripthtmlcssrshiny

Transforming jQuery code to pure vanilla Javascript

For my project, I decided to convert my jQuery code into native JavaScript. The goal is to eliminate the dependency on jQuery and achieve the same functionality. The current setup involves two pages - page.html and side.html. The page.html document fetches ...

javascriptjqueryhtml

JQuery fails to remove the "display:hidden" attribute

List of methods I attempted: Utilizing .removeClass and addClass functions Applying show() and hide() methods Modifying the CSS properties Initially, I confirmed that my script contains onLoad. Furthermore, all other elements are functioning correctly. D ...

javascripthtmljquery

Troubleshooting problem with CSS scaling on smartphones

I'm attempting to create a website (the first one I've ever designed) dedicated to my girlfriend's cat. However, when viewed on a mobile device, it doesn't look good. I've made an effort to adjust the meta viewport tag, but it does ...

htmlcss

Discovering the precise Offset value for a Div element

Looking for a way to identify the unique value of each div on my HTML page, even as offset values change with each refresh. Any suggestions or methods that can help achieve this? ...

javascriptjqueryhtmloffset

``Do not forget to close the modal window by clicking outside of it or

I am looking for a way to close the modal window either when a user clicks outside of it or presses the escape key on the keyboard. Despite searching through numerous posts on SO regarding this issue, I have been unable to find a solution that works with ...

javascriptjqueryhtmlcss

CSS-Only tooltip that adjusts size dynamically

Having trouble getting a tooltip to work exactly as desired? I need to implement tooltips for the contents of dynamically built HTML tables. It must be done with CSS only, without relying on JavaScript or events for performance reasons. The challenge is ha ...

htmlcsstooltip