In an HTML table, configure a column to expand to fill the remaining space while also having a minimum width of 300

Question

In an HTML table, configure a column to expand to fill the remaining space while also having a minimum width of 300

Is there a way to create a column in the middle of an HTML table that fills the remaining space with a minimum width of 300px?

Take a look at this JSfiddle for reference.

HTML:

<table>
  <tr>
    <td class="fixed-width">Fixed width column</td>
    <td class="remaining-width-or-300-pixels">
      This column contains long content and should fill the remaining space, with a minimum width of 300 pixels. Content can be truncated if needed.
    </td>
    <td class="fixed-width">Another fixed width column</td>
  </tr>
</table>

CSS:

table {
  display: table;
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
  color: white;
}

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
  overflow: hidden;
  min-width: 300px;
}

The issue is that when adjusting the column width, min-width: 300px; doesn't seem to work as expected.

Are there any CSS-only solutions (no javascript) to address this problem?

Edit: Please note that using div elements instead of table, tr, and td is not an option, as I am utilizing a library that specifically requires the use of the table element.

html css html-table

Answer 1

Answer №1

My analysis indicates that the issue might be related to the table-layout: fixed; property.

As outlined in a resource found here, setting the value of fixed will enforce a fixed table layout algorithm. This means that the widths of the table and columns are determined by the widths of either the table or col elements, or by the first row of cells. This could potentially explain why the min-width property is not functioning as expected for the td element.

table {
  display: table;
  width: 100%;
  /* table-layout: fixed; */
  white-space: nowrap;
  color: white;
}

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
  min-width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
  overflow: hidden;
  min-width: 300px;
 
}

<table>
  <tr>
    <td class="fixed-width">A set width column</td>
    <td class="remaining-width-or-300-pixels">
    A column 
    </td>
    <td class="fixed-width">A set width column</td>
  </tr>
</table>

Answer 2

My analysis indicates that the issue might be related to the table-layout: fixed; property.

As outlined in a resource found here, setting the value of fixed will enforce a fixed table layout algorithm. This means that the widths of the table and columns are determined by the widths of either the table or col elements, or by the first row of cells. This could potentially explain why the min-width property is not functioning as expected for the td element.

table {
  display: table;
  width: 100%;
  /* table-layout: fixed; */
  white-space: nowrap;
  color: white;
}

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
  min-width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
  overflow: hidden;
  min-width: 300px;
 
}

<table>
  <tr>
    <td class="fixed-width">A set width column</td>
    <td class="remaining-width-or-300-pixels">
    A column 
    </td>
    <td class="fixed-width">A set width column</td>
  </tr>
</table>

Answer 3

Answer №2

Implement text-overflow:ellipsis for truncating text.

table {
      display: table;
      width: 100%;
      table-layout: fixed;
      white-space: nowrap;
      color: white;
    }

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 300px;
}

<table>
  <tr>
    <td class="fixed-width">A column with a set width</td>
    <td class="remaining-width-or-300-pixels">
    A column with lengthy content, taking up the remaining space or at least 300 pixels. It's acceptable if it needs to be truncated.
    </td>
    <td class="fixed-width">A column with a set width</td>
  </tr>
</table>

Answer 4

Implement text-overflow:ellipsis for truncating text.

table {
      display: table;
      width: 100%;
      table-layout: fixed;
      white-space: nowrap;
      color: white;
    }

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 300px;
}

<table>
  <tr>
    <td class="fixed-width">A column with a set width</td>
    <td class="remaining-width-or-300-pixels">
    A column with lengthy content, taking up the remaining space or at least 300 pixels. It's acceptable if it needs to be truncated.
    </td>
    <td class="fixed-width">A column with a set width</td>
  </tr>
</table>

Answer 5

Answer №3

Successfully found a solution that works. By adding the widths of fixed width columns and setting the min-width for the column that takes up the remaining space, you can then set the table's min-width to this total.

View the interactive demonstration on jsfiddle

This is how the HTML looks:

<table>
  <tr>
    <td class="fixed-width">Fixed Width Column</td>
    <td class="remaining-width-or-300-pixels">
      Column with lengthy content, taking up the leftover space or at least 300 pixels. It's alright if it needs to truncate.
    </td>
    <td class="fixed-width">Fixed Width Column</td>
  </tr>
</table>

Here is the corresponding CSS:

table {
  display: table;
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
  color: white;
  min-width: 700px;
}

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
}

Answer 6

Successfully found a solution that works. By adding the widths of fixed width columns and setting the min-width for the column that takes up the remaining space, you can then set the table's min-width to this total.

View the interactive demonstration on jsfiddle

This is how the HTML looks:

<table>
  <tr>
    <td class="fixed-width">Fixed Width Column</td>
    <td class="remaining-width-or-300-pixels">
      Column with lengthy content, taking up the leftover space or at least 300 pixels. It's alright if it needs to truncate.
    </td>
    <td class="fixed-width">Fixed Width Column</td>
  </tr>
</table>

Here is the corresponding CSS:

table {
  display: table;
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
  color: white;
  min-width: 700px;
}

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
}

In an HTML table, configure a column to expand to fill the remaining space while also having a minimum width of 300

Answer №1

Answer №2

Answer №3

Similar questions

Using JQuery to delete an item by clicking on the delete button and then clicking on the item to remove it

What is the best way to invoke the datepicker function on all rows of table data that share the 'datepicker' class?

Using HTML to create an email link with a subject that includes special characters such as '&'

Prolong the duration before the submenu closes on a div-based css menu

Using Python and Selenium to retrieve information from the attribute 'data-label'

What is the procedure for closing a snackbar when the close button is clicked?

Issue encountered with JavaScript function within TypeScript file connected to HTML code

Signs that indicate a socket has truly disconnected

Responsive Text in HTML Email Depending on Device

What is the process for manually looping an HTML5 video on iOS 4.3/5?

Detecting when users stop scrolling in Angular 5

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

Drupal 7 FlexSlider - alignment issue with image placement

adjusting the width of an HTML table cell

Following my ajax submission, the functionality of my bootstrap drop-down menu seems to have been compromised

Blending HTML elements with ASP.NET code

A step-by-step guide on showcasing three post images in separate divs at the bottom of a webpage with Reactjs and Css

Changing the size of an image in an HTML5 canvas

Tips for optimizing HTML5 markup elements to render effectively in Internet Explorer

Ways to update the color of the mat-dialog-title using the material theme