Column width changes in HTML table if the table only has a single row

Question

I have a 1D array of objects. I need to display data from that array in a table with 3 columns. I assign 1/3rd of 100% width for each column, since number of columns is fixed. If I have 3 or more objects to display, everything works fine. However if I have 1 or 2 objects then the column width changes, the columns expand to fit max width.

Here is my code. I know there's inline css everywhere, it is on purpose. Please bear with me. I have provided an array with 2 objects and another with 4 objects so you can se the difference. I know I can write a separate condition for no. of objects less than 3, and then set specific width, but I'm hoping this can be solved with CSS alone. I would really appreciate it if someone could help out.

Edit: I have a JS based solution already. I calculate table width dynamically if array has less than 3 objects, like below.

let width = '100%';
if (listOfPeople.length < 3 && listOfPeople.length > 0) {
  width = (listOfPeople.length * 100) / 3 + '%';
}

And that width is used as so

appDiv.innerHTML = `
    <table width="${width}" border="0">
        <tbody>
            <td style="width: calc(100% / 3); height: 100%; max-width: calc(100% / 3); padding: 10px;">
              data
            </td>
        </tbody>
    </table>
  `;

I have not updated this solution in the linked code as I was really hoping for a CSS solution. If anyone has any ideas then please let me kno

Answer 1

I added 2 variables here. iterator which just figures out how many TD's to make for any given row based on the remaining listOfPeople, and perc which figures out how wide to make the rows.

 const array2 = [ new Map([ ['name', 'Jacqueline M. Goodrich'], ['img', ''], ['department', 'Marketing'], ['location', 'jhvjb'] ]), new Map([ ['name', 'Jacqueline M. Goodrich2'], ['img', ''], ['department', 'Marketing'], ['location', 'frds'] ]), new Map([ ['name', 'Jacqueline M. Goodrich2'], ['img', ''], ['department', 'Marketing'], ['location', 'frds'] ]), new Map([ ['name', 'Jacqueline M. Goodrich2'], ['img', ''], ['department', 'Marketing'], ['location', 'frds'] ]) ]; const array3 = [ new Map([ ['name', 'Jacqueline M. Goodrich'], ['img', ''], ['department', 'Marketing'], ['location', 'jhvjb'] ]), new Map([ ['name', 'Jacqueline M. Goodrich2'], ['img', ''], ['department', 'Marketing'], ['location', 'frds'] ]) ] function doTable(listOfPeople) { let cardsrows = ''; for (let i = 0; i < listOfPeople.length;) { let cards = ''; let iterator = Math.min((listOfPeople.length - i), 3) let perc = Math.min(listOfPeople.length, 3) for (let col = 0; col < iterator; col++) { const record = listOfPeople[i]; const card = `<td style="border:1px solid #ccc; width: calc(100% / ${perc}); height: 100%; max-width: calc(100% / ${perc}); padding: 10px;">info</td>`; cards = cards.concat(card); i++; } const row = cards? `<tr>` + cards + `</tr>`: ``; cardsrows = cardsrows.concat(row); } document.getElementById('appDiv').innerHTML = ` <table width="100%" border="0"> <tbody> ${cardsrows} </tbody> </table> `; }

 <div id='appDiv'></div> <button onclick='doTable(array2)'>Table for 4</button> &nbsp; <button onclick='doTable(array3)'>Table for 2</button>