CSS tr element does not go under the previous tr elements like a row for responsive data table

I am trying to create a responsive data table for a size chart on a website. The size chart becomes a horizontal scroll when viewed on mobile which is the problem I am trying to fix.

Following this webpage https://css-tricks.com/responsive-data-tables/ I applied CSS to the appropriate screen size to change the format of the table to be suitable when view on smaller screens.

The elements contained in the tr tags i.e td are suppose to act as rows, and should display the contents of tr one by one, which it seems to do. But the next tr tag seems to begin displaying its contents right under the first element from the previous tr tag. This causes the elements to overlap one another and I cannot figure out why.

The table also seems quite far off what is seen on the web page displayed above.

This is the website I am working on: https://www.farrier-shop.com/scoot-boots/

This is the code for the appropriate HTML and CSS I am currently using: https://codepen.io/rei-yoshinari/pen/ExYMJyB

CSS:

table {
    width: 100%;
    border-collapse: collapse;
}

tr:nth-of-type(odd) {
    background: #eee;
}

th {
    background: #333;
    color: white;
    font-weight: bold;
}

td, th {
    padding: 6px;
    border: 1px solide #ccc;
    text-align: left;
}

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
table, tbody, th, td, tr{
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
tbody th {
position: absolute;
top: -9999px;
left: -999px;
}

tr { border: 1px solid #ccc; }

td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee
position: relative;
padding-left: 50%;
}

table td:first-child {
color:red;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
}

td:nth-of-type(1):before { content: "SIZE "; }
td:nth-of-type(2):before { content: "WIDTH(INCHES) "; }
td:nth-of-type(3):before { content: "LENGTH(INCHES) "; }
td:nth-of-type(2):before { content: "SIZE "; }
td:nth-of-type(2):before { content: "WIDTH(mm) "; }
td:nth-of-type(2):before { content: "LENGTH(mm) "; }

A screenshot of the problem: https://i.stack.imgur.com/uytGF.jpg

Would appreciate if anyone can help me out with a solution!

Cheers