I have been making a simple website for a video game that I play that details the characters and attacks that are in the game. This requires large tables to display the data that I want to show. For the table that houses all the attacks the last (rightmost) column has a sentence or two explaining what the attack does. On PC this looks fine but when the page is viewed on mobile this column is squished, which both makes it less aesthetically pleasing and also makes it harder to read. I currently have the CSS file for the table set to the following, which allows the table to scroll without going over the edge of the page:
table{
table-layout: fixed;
max-width: 100%;
overflow-x: scroll;
display: block;
}
I was wondering if it would be possible to increase the width of the table (or just the last column, whichever is easiest to implement) while still having it display as a scrollable table which doesn’t go over the edge of the page.
The table is also using DataTables to allow for the columns to be sorted, if that changes anything.
I have tried increasing the min-width of the column, but the change isn’t implemented.
I also tried increasing the width of the table to 1250px with !important, which did show (if !important wasn’t added then the change didn’t show), but I was unable to then have the table overflow the same way it currently does.
0
You want to place your table inside a container. Here the container is 100% of page, whereas the table is about twice that. Was this what you had in mind?
body {
padding: 10px;
margin: 0;
}
table {
table-layout: fixed;
width: 200vw;
border-collapse: collapse;
margin: 10px;
}
.table-container {
width: 100%;
overflow-x: auto;
border: 1px solid pink;
}
th,
td {
border: 1px solid #000;
padding: 5px;
text-align: center;
}<div class="table-container">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
<td>Row 1, Col 4</td>
<td>Row 1, Col 5</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
<td>Row 2, Col 4</td>
<td>Row 2, Col 5</td>
</tr>
</tbody>
</table>
</div>1
I managed to get it working the way I wanted it to by adding a min-width to the table header, while using the same CSS file:
<tr>
<th scope="col">Type</th>
<th scope="col">MP</th>
<th scope="col" style="min-width:120px">Name</th>
<th scope="col">Element</th>
<th scope="col">Range</th>
<th scope="col">Potency (Physical)</th>
<th scope="col">Base Potency (Martial/Breath)</th>
<th scope="col">Filter Rank</th>
<th scope="col">Filter Colour</th>
<th scope="col">Filter Type</th>
<th scope="col">Filter Element</th>
<th scope="col" style="min-width:400px">Description</th>
</tr>1