I am currently facing an issue where I am attempting to adjust the size of a table to occupy 80% of the width of the page, without altering the width of the columns. Below is a comparison between the current situation and the desired outcome.
Current: https://i.sstatic.net/BQa2o.png
Expected: https://i.sstatic.net/soabR.jpg
These are the CSS properties that have been applied to the table:
table {
margin:0 auto;
width: 80%;
background-color: rgba(167, 167, 167, 0.5);
table-layout: fixed;
text-align: center;
}
If I remove the width attribute from the table, it displays correctly as shown in the second image, but it does not expand the table to the desired size.