thead is not displaying - css

Question

I have problem with my table. This table is primary for phones. When I have phone vertical, table is not showing thread, but when I have phone horizontally, it shows correctly.
Can anybody help me to display this table correctly on phones when phone is vertically?
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
/*table-layout: fixed;*/
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f9f9f9;
border: 1px solid #ddd;
padding: .35em;
}
table tr:hover {
background-color: #f5f5f5;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: #333333;
color: #fff;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 60px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
display: block;
width: 0px;
}
table tr {
border-bottom: 3px solid #ddd;
/*//spodok tabulky*/
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
/*Hrubka ciary medzi riadkam*/
display: block;
font-size: .8em;
text-align: center;
/*Pozicia textu*/
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:nth-child(even) {
background-color: #f2f2f2;
}
}
<table>
<thead>
<tr>
<!--<th>Poradie</th>-->
<th>Císlo zákazky</th>
<th>Pozícia</th>
<th>Poradové císlo</th>
<th>Stav</th>
</tr>
</thead>
</table>
Thank you for your response.

Answer 1

That's a simple fix. Remove clip: rect(0 0 0 0); and width: 0px;. Those lines hides the entire thead because the #media condition kicks in in portrait mode (narrower screen).
You might want to redo the entire #media section of your css - it's overall a bit weird. Maybe add a couple of details what you originally intended to do on narrow screens.
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
/*table-layout: fixed;*/
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f9f9f9;
border: 1px solid #ddd;
padding: .35em;
}
table tr:hover {
background-color: #f5f5f5;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: #333333;
color: #fff;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
height: 60px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
display: block;
}
table tr {
border-bottom: 3px solid #ddd;
/*//spodok tabulky*/
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
/*Hrubka ciary medzi riadkam*/
display: block;
font-size: .8em;
text-align: center;
/*Pozicia textu*/
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:nth-child(even) {
background-color: #f2f2f2;
}
}
<table>
<thead>
<tr>
<!--<th>Poradie</th>-->
<th>Císlo zákazky</th>
<th>Pozícia</th>
<th>Poradové císlo</th>
<th>Stav</th>
</tr>
</thead>
</table>

Answer 2

Lets just remove thead position and display rules.
Now we can see the thead. The you can add the remaining styles.
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
/*table-layout: fixed;*/
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f9f9f9;
border: 1px solid #ddd;
padding: .35em;
}
table tr:hover {
background-color: #f5f5f5;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: #333333;
color: #fff;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 60px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 0px;
}
table tr {
border-bottom: 3px solid #ddd;
/*//spodok tabulky*/
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
/*Hrubka ciary medzi riadkam*/
display: block;
font-size: .8em;
text-align: center;
/*Pozicia textu*/
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:nth-child(even) {
background-color: #f2f2f2;
}
}
<table>
<thead>
<tr>
<!--<th>Poradie</th>-->
<th>Císlo zákazky</th>
<th>Pozícia</th>
<th>Poradové císlo</th>
<th>Stav</th>
</tr>
</thead>
</table>