Using CSS td width absolute, position

html

responsive-design

css

table-layout

byNikita Barsukov·Dec 3, 2024

To enforce an absolute width on a td, set its width and min-width to be identical:

td.fixed-width {
  width: 100px;
  min-width: 100px;
}

Attach the class in your HTML:

<td class="fixed-width"></td>

To prevent td width flexibility, use:

table {
  table-layout: fixed;
}

This will ensure your column has a fixed width of 100px.

Remember to ensure your overall table width is large enough to contain each td and to prevent unsightly table wrapping.

Setting and maintaining fixed column width

In building tables, it's crucial to have control over the width of the columns. Set the table layout to be fixed to gain this control:

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

You should then ensure that each td or th has a width which fits into your table's total width:

<td class="column-fixed-width"></td>

<td style="width: 200px;"></td>

Effects of absolute positioning on table cells

Remember, using position: absolute; inside table cells can lead to layout irregularities.

td.relative-position {
  position: relative;
}

Mitigating content overflow

If the content inside your td exceeds its width, make smart use of overflow properties:

td {
  overflow: hidden; // Hide the overflow
  overflow: auto;   // Add scrollbars when necessary
}

Handling overflowing content

Think of this as a tray of too many delicious dishes. How do we cleanly contain it all? This is just like handling overflowing content in your tables:

overflow: hidden; neatly trims off the extra content
overflow: scroll; provides a scrollbar to access the hidden content
overflow: auto; automatically determines whether to hide or scroll

Designing responsive tables

When developing responsive tables, it's essential to adjust the column widths depending on the sizing of the viewport. This can be achieved using media queries:

@media screen and (max-width: 600px) {
  .responsive-table td:nth-child(even) {
    display: none; // Hiding non-essential columns on smaller screens
  }
}