How to stop html from squeezing content?

Question

I am trying to create a table with fixed column widths. I have a scroll on both axes, so that i can see the overflowing content, but some force keeps overwriting the CSS width property, to fit the content in my div.

It stops the squeezing with enough content, because i have a white-space: nowrap; property on the columns in my table body, but i want the table header to wrap at most once. I tried to look online to see if i could limit the wrap to at most once and found this:

max-height: 2.6em;
line-height: 1.3em;

But even that got overwritten when the content is squeezed. I would like to stop the squeezing in my div altogether, but all the solutions of that kind seem to work with flex boxes and i haven't worked with those before.

What would the simplest solution to this be?

CSS:

#datawrapper {
    float: left;
    width: 75%;
    height: 600px;
    margin: 20px 20px 200px;
    overflow-y: auto;
    overflow-x: auto;
    
}

table {
    float: left;
    border-collapse: separate; /* Don't collapse */
    border-spacing: 0;
}   

table th {
    border-bottom: 1px solid black;
    border-right: 1px solid black;

    background-clip: padding-box;
    text-align: center;
    background-color: lightblue;
}

table thead {
    position: sticky;
    top: 0px;
    background-clip: padding-box;
}

table td {
    /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
    border-bottom: 1px solid black;
    border-right: 1px solid black;

    text-align: center;
    white-space: nowrap;
    background-clip: padding-box;
}

table th:first-child,
table td:first-child {
    /* Apply a left border on the first <td> or <th> in a row */
    border-left: 1px solid black;
}

table thead tr:first-child th {
    border-top: 1px solid black;
    padding: 0px 10px;
    width: 300px;
}

table tbody tr:nth-child(even) {
    background-color: lightgrey;
}

JS:

var table = document.createElement("TABLE");

var header = table.createTHead();
data = document.createElement("TBODY");

var nameRow = header.insertRow(-1);
var infoRow = header.insertRow(-1);

for (let set of datasets) {
    var cell = document.createElement("th");
    cell.colSpan = 2;
    cell.innerHTML = set.label; 
    nameRow.appendChild(cell);

    cell = document.createElement("th");
    cell.innerHTML = "Aika"
    infoRow.appendChild(cell);

    cell = document.createElement("th");
    cell.innerHTML = "Arvo"
    infoRow.appendChild(cell);
    
    ...

Edit:

Even with table-layout:fixed the width gets overwritten. I tried to define columns inside a colgroup as suggested here, but that didn't work either.

It is extremely hard to spot the problem if you don't include all the CSS and HTML code related to your issue. Please, make sure to always include all the code when you post a question. — Ken, Sep 08 '21 at 08:57
@Alvaro Menéndez I am now. That didn't fix it, but i am looking into why. Thanks. — Jesper, Sep 08 '21 at 09:15

score 0 · Accepted Answer · answered Sep 08 '21 at 10:52

I ended up getting a fixed width by adding padding to the table body cells and setting the width to anything small. That way there is nothing left for the page to squeeze.

This is my final css:

#datawrapper {
    float: left;
    width: 75%;
    height: 600px;
    margin: 20px 20px 200px;
    overflow-y: auto;
    overflow-x: auto;
}

table {
    float: left;
    border-collapse: separate; /* Don't collapse */
    border-spacing: 0;
}   

table th {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    text-align: center;
    background-color: lightblue;
}

table thead {
    position: sticky;
    top: 0px;
}

table td {
    /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    text-align: center;
    white-space: nowrap;
}

table th:first-child,
table td:first-child {
    /* Apply a left border on the first <td> or <th> in a row */
    border-left: 1px solid black;
}

table thead tr:first-child th {
    border-top: 1px solid black;
    padding: 0px 10px;
    width: 100px;
}

table tbody tr:nth-child(even) {
    background-color: lightgrey;
}

table tbody td:nth-child(odd) {
    padding: 0px 50px;
}

table tbody td:nth-child(even) {
    padding: 0px 10px;
}

This looks like:

How to stop html from squeezing content?

1 Answers1