Responsive tabular table not working locally

HTML-CSS
1

Hi, I found following example for a responsive table layout.
This example https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100 works in the pen. But when I implement it in my code on my computer it doesn’t work… or better vs code live server shows it incorrectly on either firefox or chrome…

When I import the code back to code pen it works…???

2

What are these in the HTML?

        <link rel="stylesheet" href="css/style.css" type="text/css"/>
        <link rel="stylesheet" href="css/reset.css" type="text/css"/>
        <link rel="stylesheet" href="css/vars.css" type="text/css"/>

CodePen isn’t going to load them because they’re local files on your computer.

3

The style.css is exactly as in codepen.
The vars.css are just preset of colors.
The reset.css is a general reset css file that I always used and never had any issues with.

When I put it online, I get yet another visual display of the site.

This is the content off the reset.css , when I disable it the transition works but other weird things happen.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
 }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 table {
	border-collapse: collapse;
	border-spacing: 0;
}

One more thing when I add the reset code to the codepen and test it then I get what I want without quirkyness. When I try it on VSCode live or mamp or the server. Something weird happens when I change the browser to it maximum size by hand. Result is that rows are going down due to the movement of my browser and keep going down until they are off the visible part of the browser. Could somebody copy the code below and see if this also happen on there setup.

https://codepen.io/QDW/pen/pqOmoX

4

I found the error it was a double table element in the css!!