Semantic-UI, responsive horizontal table unstackable, single line, with scroll

Question

This is the example:

https://plnkr.co/edit/WRXGNFlG1FWrF8rtIVU4?p=preview

You can resize the window to see what I mean:

• Table in Desktop mode:

• Table in Mobile mode:

I'm using display: block on table. It works good on mobile mode, but not in Desktop mode, as you can see. Why?

Can we fix this small problem?

Answer 1

Media queries

@media (min-width:320px)  { table { display: block; } }
@media (min-width:960px)  { table { display: table; } }

This is a simple example, but you could adapt the breakpoints for your specific needs.

Table wrapper

If you have a table that is too wide, you can add a container element with overflow-x:auto around the table, and it will display a horizontal scroll bar when needed. Resize the browser window to see the effect. Try to remove the div element and see what happens to the table.

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

Forked version of your example: https://plnkr.co/edit/irZUV08VdBYUemFiMiwI?p=preview