Realmente existe um problema é na hora de validar pelo https://jigsaw.w3.org/css-validator ele mostra este erro:
Value Error : content Parse Error attr(db)
Como na imagem:
O valor attr
no content:
não era suportado até algum tempo, mas hoje já é parte do CSS3, então se trata de um BUG https://github.com/w3c/css-validator/issues/24
No entanto se tentar validar em http://www.css-validator.org/ ele funciona normalmente (selecione em More Options > Profile : a opção CSS level 3, porque senão ele vai usar a versão 2.1) ele irá validar normalmente, veja o resultado:
Considerações sobre o HTML
- não use
abbr=
, ele está em desuso no html5.
- O atributo
db
é invalido.
- Ao invés de
db=""
use o atributo data-
que é especifico pra este tipo de tarefa.
Agora informações adicionais:
- Falta as tags
<body>
, <head>
e <title>
se não ele não valida
HTML e CSS validos
<!DOCTYPE html>
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
table {width:100%; border-collapse: collapse;}
table tr {border: 1px solid #000; padding: 5px;}
table th, table td {padding: 10px;text-align: center;}
@media screen and (max-width: 35.5em) {
table {border: 0;}
table thead {display: none;}
table tr {margin-bottom: 10px;display: block;border-bottom: 1px solid #000;}
table td {display: block; text-align: right; border-bottom: 1px solid #000;}
table td:last-child {border-bottom: 0;}
table td:before {content: attr(data-db);float: left;font-weight: bold;}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Data de Nasc.</th>
<th>Salário</th>
<th>Cargo</th>
</tr>
</thead>
<tbody>
<tr>
<td data-db="Nome">Adão</td>
<td data-db="Data de Nasc.">01/01/1980</td>
<td data-db="Salário">R$ 1.250,00</td>
<td data-db="Cargo">Auxiliar de produção</td>
</tr>
<tr>
<td data-db="Nome">Eva</td>
<td data-db="data de Nasc.">01/01/1980</td>
<td data-db="Salário">R$ 2.500,00</td>
<td data-db="Cargo">Gerente</td></tr></tbody>
</table>
</body>
</html>
Validado 100% em:
Dicas:
- Realmente é bom validar o CSS e o HTML, mas não é tão importante assim, tem coisas como esta que funcionam mas não validam, então prefira apenas se importar se o CSS funciona em todos navegadores que deseja, mesmo que não valide.
- Estão aparecendo muitas novas funcionalidade no CSS, nem tudo estará listado no validador e podem aparecer estes falsos problemas.
Resumindo, tente validar o que der, mas se algo falhar não se prenda tanto a isto, desde que funcione em todos navegadores que seus clientes usam (de preferencia os mais modernos) então estará tudo bem.
{content: "NOME: ";}
, mas entenda isto{content: "NOME: ";}
é diferente disto{content: attr(db);}
, é totalmente possivel validar o{content: attr(db);}
em css-validator.org como eu disse na resposta, mas se o alternativo lhe resolveu ok. :)