Question

i have a html table which looks like this:

<table>
  <thead>
    <tr>
      <th >title1</th>
      <th >title2</th>
      <th >title3</th>
      <th >title4</th>
      <th >title5</th>
      <th >title6</th>
      <th >title7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
      ...
      <td>data7</td>
    </tr>
  </tbody>

the issue I am having is that I only have around 300px to put all this information in, I was wondering if there was some way that I can tell the table to split if it reaches the end of 300px limit. is this even possible ? or shall i just go back to using divs ?

Answer 1

I’m not sure what ‘splitting’ is, but a good alternative would be to wrap the table in a container with overflow-x: auto set. That will make it scrollable.

Live Example