Jump to content

Mobile table formatting HTLML / CSS

Recommended Posts

Posted (edited)

Hi, do you know how to make this table better for mobile view?

And is there a way to have different text sizes inside a cell?

Here´s the HTML code for the table

<style>
.table_component {
    overflow: auto;
    width: 100%;
}

.table_component table {
    border: 1px solid #dededf;
    height: 100%;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
    text-align: left;
}

.table_component caption {
    caption-side: top;
    text-align: left;
}

.table_component th {
    border: 1px solid #dededf;
    background-color: #eceff1;
    color: #000000;
    padding: 5px;
}

.table_component td {
    border: 1px solid #dededf;
    background-color: #ffffff;
    color: #000000;
    padding: 5px;
}
</style>
<div class="table_component" role="region" tabindex="0">
<table>
    <caption>
        <p><br></p>
    </caption>
    <thead>
        <tr>
            <th>Palvelu ja kesto</th>
            <th>3 kk</th>
            <th>6 kk</th>
            <th>12 kk</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>All Inclusive Apteekin Somepaketti*<br></td>
            <td>1890 €/kk</td>
            <td>1690 €/kk</td>
            <td>1490 €/kk</td>
        </tr>
        <tr>
            <td>Apteekkarin henkilökohtainen johtamisvalmennus / coaching<br><br>Sisältö: alkukartoitus, paketin mukainen määrä tapaamisia kesto á 60 min, etätuki sähköpostilla, seuranta prosessin aikana</td>
            <td>790 €/kk<br><br>Kolme tapaamista</td>
            <td>690 €/kk<br><br>Kuusi tapaamista</td>
            <td>649 €/kk<br><br>Yhdeksän tapaamista</td>
        </tr>
        <tr>
            <td>Työyhteisövalmennus </td>
            <td>1890 €/kk<br><br>2 x valmennus johdolle, kesto á 60 min<br>1 x lähivalmennus koko henkilökunnalle, kesto 3 h<br><br><br><br></td>
            <td>1690 €/kk<br><br>
                <p>4 x valmennus johdolle, kesto á 60 min<br>2 x lähivalmennus koko henkilökunnalle, kesto 3 h</p>
                <p><br></p>
                <p><br></p>
                <p><br></p>
            </td>
            <td>1490 €/kk<br><br>
                <p>6 x valmennus johdolle, kesto á 60 min<br>2 x lähivalmennus koko henkilökunnalle, kesto 3 h</p>
                <p>2 x etävalmennus koko henkilökunnalle, kesto á 60 min 1-3 ryhmää</p>
            </td>
        </tr>
    </tbody>
</table>
  </a></div>
</div>

https://www.somefarmaseutti.fi/palvelut

Table.JPG

Edited by DigitalPharmacist
More information
Link to comment
  • Replies 1
  • Views 192
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.