How do I set the width of a table without affecting the width of each of its columns?

user_7470057 0
Viewed 72

Here I have an issue where I am trying to resize a table to take up 80% of the pages width, however I don't want the width of the columns to be adjusted. Below is an image of what is happening vs what is expected.

Now: enter image description here

What is expected: enter image description here

Here are the CSS attributes that I have applied to the table:

table {
    margin:0 auto;
    width: 80%;
    background-color: rgba(167, 167, 167, 0.5);
    table-layout: fixed;
    text-align: center;
}

Whenever I take off the width of the table, it displays how it should, as shown in the bottom picture, however it doesn't extend the table to the size that I would like it to.

html-table css html
1 Answers

I suggest to erase the table-layout: fixed;, which will make every column the same width (if there are no defined widths) instead of being responsive to the cell's contents.

user_56416690
Related