Question 406873 in Html Question posted in
Some basic documentation can be found here.

How can I make a table in HTML larger than the max-width of the page, and then have it be scrollable on the x-axis

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>


  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search