Table Overflow

[csosa]

Hello I have a table on the bottom of this PAGE
and It is responsive but when it hits about 400px
in the viewport the table starts to overflow.

I have the parent like so:

.page{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

[ronpat]

The table starts to overflow because, after all of the text has wrapped as much as it can, the bulleted list items are wider than the available space. You might be able to reduce some padding at the narrowest widths, or perhaps display the list items in a single column at the the narrowest width.

Have you made an effort to validate the code on this page?

476 errors. Even though some of them are almost trivial (and could be fixed easily) when we get down to the tables the errors are significant. One cannot build a table with <thead> tags nested this way. Nested tables actually need to be placed inside a parent <td>. It looks like it was done so you can use the <th> tags in the titles for each table section; but it’s just too creative.

The list structure in the footer is whacked. <h2> and <br> tags outside of list item tags is not valid.

Occasional trips through the validator would help minimize an accumulation of errors.

[PaulOB]

@ronpat

It looks like it was done so you can use the <th> tags in the titles for each table section; but it’s just too creati

TH elements are allowed throughout a table but of course only one thead (or tfoot) element is allowed (multiple tbodys are allowed which is useful for targeting sections). If you have multiple headers in a table then you need to use th instead of td and use the headers attribute to identify the data correctly.

[csosa]

@ronpat

Occasional trips through the validator would help minimize an accumulation of errors.

alright