Všem moc děkuji problém vyřešen :D,
kód jsem opravil takto:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1; /* pro IE6 a IE7 */
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media (max-width: 930px) {}
@media (max-width: 730px) {}
@media (max-width: 480px) {}
@media (max-width: 340px) {}
body {
padding: 20px 15px;
font-family: "News Cycle", Arial, Helvetica, sans-serif;
}
input {
display: inline-block;
width: 65.82278481%;
padding: 10px 0;
background-color: #6c0733;
background-image: linear-gradient(hsl(332, 90%, 40%), hsl(332, 80%, 30%) );
box-shadow: rgba(0, 0, 0, .25) 0 2px 2px 0;
font-size: 15px;
color: #fefefe;
transition: transform. 5s ease-out;
}
table {
border-collapse: collapse;
}
table, th, td {
width: 30%;
border: 0px solid black;
column-width:inherit;
}
th {
height: 50px;
background-image: linear-gradient(#4e0324, #4e0324, #851f49);
color: white;
}
tr {
text-align: center;
}
tr:hover {
background-color: #f5f5f5;
}
tr:nth-child(even){
background-color: #f2f2f2;
}
th, td {
border: 1px, 1px solid #ddd;
}
.tlacitko > input {
display: inline-block;
width: 65.82278481%;
padding: 13px 0;
background-color: #6c0733;
background-image: linear-gradient(#87053e, #560329);
box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
font-size: 20px;
color: #fefefe;
transition: transform. 5s ease-out;
}
header {
position: absolute;
width: 130px;
padding-left: 25px;
font-family: "News Cycle", Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 200px;
}
.polozka {
width: 150px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.mnozstvi {
}
.polozky {
background-image: linear-gradient(#6b5139, #2d1e10);
font-size:2px;
}
Vše funguje tak, jak má - tabulky jsem dříve nedělal, tak se jedná o chybu blbého typu :D. Krom vašich rad se mi osvědčil (a dlouhodobě osvědčuje :D) W3 schools (w3schools.com).
Takto vypadá tabulka po opravě: (myslím, že v příloze)
A ještě jednou, děkuji všem!