Fixed length table with columns taking up max-width

Question

I'm unable to figure out the CSS styles I need to apply to achieve the following:

I would like an HTML table with a max-width of up to 400px.
Within the table, each column should have a max width of 300 px.
The content within each column should always take up as much space as possible (up to 300px).
If the columns overflow the width of the table, then the table should be horizontally scrollable.

I created a codepen for this: https://codepen.io/steviedean2004/pen/LYoWREV Any help would be greatly appreciated!

So far, I have tried this (the !important is just to be for sure).

table {
  table-layout: fixed !important;
  width: 400px;
  overflow: auto;
}

th {
  max-width: 300px !important;
}

td {
  max-width: 300px !important;
}

However, it seems I'm unable to get the content to take up the width of the column (it always just shrinks, see image).

Good point--I added that in, but still getting the same issue. DYT I need to add some styles to tbody as well? — Stevie Dean
– Stevie Dean, Commented May 31, 2024 at 20:11
to have a horizontal scroll you must place the entire table in a container with width: 400px and horizontal-scroll: auto. Otherwise in the future, use a Stackoverflow snippet, and not on codepen. — Mister Jojo
– Mister Jojo, Commented May 31, 2024 at 20:19
Welcome to SO. You might find reading the site help section useful when it comes to asking a good question. To get the best answers to your question we like to see that you've attempted to solve the problem yourself first using a minimal reproducible example. Here's a question checklist you might find useful... — Mister Jojo
– Mister Jojo, Commented May 31, 2024 at 20:20
You will need to insert a div inside the td with the content inside of the div. See this SO link — Mehdi
– Mehdi, Commented May 31, 2024 at 20:21

Stevie Dean · Accepted Answer · 2024-05-31 23:54:34Z

Mehdi was correct. Putting a div inside the and then putting the styles on the div worked.

e.g.

.my-table-wrapper {
  display: block;
  width: 400px;
  overflow-x: auto;
}

.my-table {
  table-layout: fixed;
}

th>div, td>div {
  width:max-content;
  max-width:300px;
}

.result-header {
  background-color: white;
  border-bottom: 1px solid black;
  padding: 5px 0 5px 0;
}

.result-header-title {
  font-size: medium;
  font-weight: bold;
  margin: 0 auto 0;
  display: inline;
  padding-top: 4px;
}

.h-300 {
  height: 300px;
}

/* Table styling */
.my-table,
.my-table th,
.my-table td {
  background-color: white;
}
.my-table thead tr {
  background-color: rgba(0, 0, 0, 0.04);
}
.my-table--sticky-header thead {
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.14),
    0 3px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 5px -5px rgba(0, 0, 0, 0.12);
  position: sticky;
  top: -1px;
}

<div class="my-table-wrapper h-300">
  <table class="my-table my-table--sticky-header">
    <thead>
      <th>Field here</th>
      <th>Field here</th>
      <th><div>Maybe a super long field here</div></th>
      <th>Field here</th>
      <th>Field here</th>
    </thead>
    <tbody>
      <tr>
        <td><div>Some data goes here</div></td>
        <td><div>Some data goes here</div></td>
        <td><div>Some data goes here</div></td>
        <td><div>Some more data, but really long data goes here and maybe it overflows too</div></td>
        <td><div>Some data goes here</div></td>
      </tr>
      <tr>
        <td><div>Some data goes here</div></td>
        <td><div>Some data goes here</div></td>
        <td><div>Some data goes here</div></td>
        <td><div>Some more data, but really long data goes here</div></td>
        <td><div>Some data goes here</div></td>
      </tr>
      <tr>
        <td><div>Some data goes here</div></td>
        <td><div>Some data goes here</div></td>
        <td><div>Some data goes here</div></td>
        <td><div>Some more data, but really long data goes here</div></td>
        <td><div>Some data goes here</div></td>
      </tr>
      <tr>
        <td><div>Some data goes here</div></td>
        <td><div>Some data goes here</div></td>
        <td><div>Some data goes here</div></td>
        <td><div>Some more data, but really long data goes here</div></td>
        <td><div>Some data goes here</div></td>
      </tr>
    </tbody>
  </table>
</div>

Collectives™ on Stack Overflow

Fixed length table with columns taking up max-width

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related