Getting an HTML table to "squish" - html

Question

My employer has wanted me to take a table that we had on our site and make it more responsive. My solution was to make the table react as detailed in a previous question of mine (Responsive Table Display)
After I went through an implemented that design, I was informed they actually just want the 5 column table "squished" so that it retains all five columns but just has them fit within the viewport, specifically on mobile.
My HTML looks basically like this:
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
Being that I am completely self-taught and have been doing this for a few months now, what can I do to make the table compress its full width in mobile view?

Answer 1

If your table is contained within an element that is 100% of the screen's width you would set the table's width to 100%. If the table's container is not necessarily 100% of the screen's width you could set the table's width to 100vw. The vw unit represents a percentage of the total viewport width. It is not supported in IE8 or lower.
If their width is left unspecified, the columns will be automatically expanded to fit the table's width.
Using the media query from your previous question:
#media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) {
table {
width: 100%; /* or 100vw depending on the rest of your HTML */
}
...
}
If you need to control the column widths, you can do that by either setting the th and tds to a fixed percentage width (that sums to 100), or by modifying the table-layout property. Setting your table to table-layout: fixed; will space all columns equally.