Comparisom table

[Gourav_Sharma]

How can i make a scrolling comparison table like this?

[hkalant]

The quickest way would be:

In Ghost Admin, make a post and add the HTML card. Paste something like:

<table>
  <tbody>
  <tr style="background:#32466b;">
    <th style="color:#fff;">Host</th>
    <th style="color:#fff;">Uptime</th>
    <th style="color:#fff;">Speed US</th>
    <th style="color:#fff;">Speed UK</th>
    <th style="color:#fff;">Speed Asia</th>
  </tr>
  <tr>
    <td>Kinsta</td>
    <td>99%</td>
    <td>2s</td>
    <td>3s</td>
    <td>1.4s</td>
  </tr>
  <tr>
    <td>WP Engine</td>
    <td>100%</td>
    <td>2s</td>
    <td>3s</td>
    <td>1.4s</td>
  </tr>
  <tr>
    <td>Flywheel</td>
    <td>99%</td>
   	<td>2s</td>
    <td>3s</td>
    <td>1.4s</td>
  </tr>
  <tr>
    <td>Siteground</td>
    <td>99%</td>
	<td>2s</td>
    <td>3s</td>
    <td>1.4s</td>
  </tr>
  <tr>
    <td>Dreamhost</td>
    <td>100%</td>
    <td>2s</td>
    <td>3s</td>
    <td>1.4s</td>
  </tr>
    </tbody></table>

Then in the Code Injection field of the post, paste something like:

    <style>
         table {display: block;overflow-x: auto;white-space: nowrap;border: 1px solid #f7f7f7;}
         table tbody {display: table;width: 100%;}
    </style>

You can customise the above with CSS etc.

On the desktop, it will probably show you the table in full, while on mobile it will show a horizontal scrollbar:

Basically, you will need to use the CSS property called overflow for this.

Hope this helps!