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

Storing Selenium WebElement in memory for extended periods to retrieve its details: A guide in C#

After uploading the WordPress theme, the wp_enqueue_style() function fails to work properly

My goal is to design a dynamic textbox for a website that allows users to customize the text in any format they desire

What methods can be used to authenticate the user's input?

The picture is not visible outside the parent container - why is it hidden?

Adding CSS styles to an HTML page using JavaScript

Tips for choosing an attribute within a list with a CSS selector and Selenium

Troubleshooting: CSS Animation Not Showing up on Screen

Deactivate the button when the text box is verified

Using jQuery to add HTML elements before the content of a list

What is the best method to extract individual data values from ul li tags using PHP?

website with a horizontal scroll-bar

Steps for adding a row as the penultimate row in a table

What is the best way to ensure that third tier menus open in line with their respective items?

Changing the opacity on hover doesn't seem to be working

Conceal navigation button within react-material-ui-carousel

Adjust the font size of MaterialUI icons using CSS

Displaying two images side by side in HTML using Bootstrap

Different ways to rearrange the placement of Export buttons in a personalized div or outside the table using Datatable

Implementing HTML rendering in a PyQt5 window