CODEWITHSUNDEEP
csshtml-table
Thomasa13
Thomasa13

Reputation: 27

How to split extra space evenly between columns when setting width on table

I've been looking for an answer to this question for a long time but never saw a glimpse of an answer.

I am making a table in HTML and sets it a specific width (usualy so it occupies all the space). It is bigger than it has to be so there is extra space split between the different columns. The problem is that it is split proportionally to the cell's width and not evenly which looks weird.
For instance for a width of 120px, you would have something like a 10px large column with a 20px extra space on the left than a 30px large column with a 60px extra space on the left.
Instead of 10 + 20 + 30 + 60, I would prefer 10 + 40 + 30 + 40 but I cannot see a way to do it. It would probably be a table-layout in my opinion but the only other option is "fixed" which gives a fixed size to the entire column and not the extra space (giving 10 + 50 + 30 + 30)

I hope I managed to make my question clear, sorry for the bad english

EDIT : I managed to make the snippet work, as you can see, the white space on the right of every cell is never the same which looks weird

table{
    width: 600px;
    border-collapse: collapse;
}
.fixed{
    table-layout: fixed;
}
td{
    border: 1px solid black;
}
<table>
    <tr>
        <td>Short</td>
        <td>A much much much much longer cell</td>
        <td>A</td>
    </tr>
</table>

<table class="fixed">
    <tr>
        <td>Short</td>
        <td>A much much much much longer cell</td>
        <td>A</td>
    </tr>
</table>

Upvotes: 1

Views: 771

Answers (2)

wheel58m
wheel58m

Reputation: 124

If you're looking for equal spacing on the right side of content in a cell, I don't believe this is possible with HTML and CSS alone. You will probably need to use JavaScript to get the results you are looking for. I've pieced together this "Frankenstein" script for you. I doubt it's the cleanest code or most functional, but it seems to accomplish what you need. If this doesn't work for you, I would look into Sass or completely abandon a table layout and use divs.

const table = document.getElementById('myTable'); // Select Table
const width = table.clientWidth; // Record Fixed Width

table.style.width = "auto"; // Remove Table Width (I can't get this to work without removing the table width).

let length = 0;
let padding = 0;

const row = table.rows[0]; // Select First Row
const cols = row.children; // Select Each Cell in First Row

[].forEach.call(cols, function(col) {
    length += col.clientWidth; // Measure Cell Content
});

// Calculate Padding
if (width >= length) {
    padding = (width - length) / cols.length;
} else {
    // If Content Length is >= Table Width, the Default to Table Width (No Padding).
    table.style.width = `${width}px`;
}

// Add Padding to Each Cell in Table
const rows = table.rows;
    [].forEach.call(rows, function(row) {
    const cells = row.children;

    [].forEach.call(cells, function(cell) {
        cell.style.paddingRight = `${padding}px`
    }); 
});
table {
    width: 500px;
    border-collapse: collapse;
}

td { border: 1px solid black; }
<table id="myTable">
    <tr>
        <td>Stuff</td>
        <td>A lot more stuff</td>
        <td>Some stuff</td>
    </tr>
    <tr>
        <td>Stuff</td>
        <td>A lot more stuff</td>
        <td>Some stuff</td>
    </tr>
        <tr>
        <td>Some Stuff</td>
        <td>Fun stuff that I like</td>
        <td>Some stuff</td>
    </tr>
</table>

Upvotes: 1

Sebak Thapa
Sebak Thapa

Reputation: 321

I think you have to provide fixed widths for <tr> and <td> too.

Upvotes: 1

Related Questions