Help with tables Options

[Hampstead]

I have set up a table to display prices, but it goes off page on a mobile device.

What changes can I make to the code to fix this?

<style type="text/css">
.tg {border:none;border-collapse:collapse;border-spacing:0;}
.tg td{border-style:solid;border-width:0px;font-family:Arial, sans-serif;font-size:14px;overflow:hidden;
padding:10px 5px;word-break:normal;}
.tg th{border-style:solid;border-width:0px;font-family:Arial, sans-serif;font-size:14px;font-weight:normal;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-g9u4{border-color:inherit;font-family:"Arial Black", Gadget, sans-serif !important;font-size:18px;text-align:left;
vertical-align:top}
.tg .tg-cio1{border-color:#000000;font-family:inherit;font-size:16px;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 470px">
<colgroup>
<col style="width: 127px">
<col style="width: 343px">
</colgroup>
<thead>
<tr>
<th class="tg-g9u4">£149</th>
<th class="tg-cio1">Basic Single Will</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax"></td>
<td class="tg-0lax">Based on your answers, we recommend the following clauses and trusts to strengthen your Will and to ensure the Will matches your individual needs.</td>
</tr>
</tbody>
</table>

[Hampstead]

I'm sure it's in this bit.

<table class="tg" style="undefined;table-layout: fixed; width: 470px">
<colgroup>
<col style="width: 127px">
<col style="width: 343px">

[Hampstead]

Sussed it. Use percentages.

[Christian J]

I'm sure it's in this bit.

<table class="tg" style="undefined;table-layout: fixed; width: 470px">
<colgroup>
<col style="width: 127px">
<col style="width: 343px">

With the "table-layout: fixed" style, "the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing."
https://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

Removing the above (and maybe also the width) might fix the problem if a 470px wide table is too much for a mobile screen, but don't most mobile devices have larger screen resolutions than that today (even taking mobile phones' unusual way of defining pixels into account)?

Another thing to try is add this in the page's HEAD section (if you haven't already), it makes page content adapt to mobile screens in a generally more useful way:

CODE

<meta name="viewport" content="width=device-width">

[Jason Knight]

I'm just wondering what makes this tabular data. Sure doesn't look like it.

Much less why you're declaring things in PX flipping the bird at accessibility, static style in the markup, colgroup which doesn't inherit properly in FF (see the "we don't care we're never going to fix it" 25 year old bugzilla 915)

I mean shouldn't this just be a section, H2, and P? Maybe with a header?

CODE

<section class="product">
    <header>
        <span>£149</span>
        <h2>Basic Single Will</h2>
    </header>
    <p>
        Based on your answers, we recommend the following clauses and trusts to strengthen your Will and to ensure the Will matches your individual needs.
    </p>
</section>

And this in your external stylesheet since appearance has ZERO business in the markup?

CODE

.product {
    max-width:30rem;
    break-inside:avoid;
}

.product header {
    display:flex;
    align-items:center;
}

.product header span {
    width:8rem;
    box-sizing:border-box;
    font:normal 1.125rem/1.2 "Arial Black",gadget,sans-serif;
}

.product h2 {
    font-size:1rem;
    font-weight:normal;
}

.product p {
    padding-left:8rem;
    font:normal 0.875rem/1.2 arial,helvetica,sans-serif;
}

That break-inside declaration will make the browser try to avoid having that <section> broken up across different pages when printed.

After all, this isn't 1998. Don't say what things look like in the HTML. Say what they are grammatically and structurally. That's how you end up with 1.2k of code doing 645 bytes job. When I talk about people writing twice or more code than they need, this is EXACTLY what I'm talking about.

You don't use tables for layout! Well, unless this was for an HTML e-mail, in which case CSS is off the table as is HTML 5.

Just as you don't declare everything as fixed widths, or in pixels. Max-width is your friend, especially if dealing with mobile / small screen is on the table.

[Jason Knight]

Here's a working pen of it:

https://codepen.io/jason-knight/pen/ExGoyER?editors=1100

The code you presented really is 25 years out of date. Not even table's job; never was.

This post has been edited by Jason Knight: Sep 20 2023, 03:26 PM