There really is a problem is time to validate by https://jigsaw.w3.org/css-validator it shows this error:
Value Error : content Parse Error attr(db)
As in the image:
The value attr in the content: was not supported until some time, but today is already part of CSS3, so it is a BUG https://github.com/w3c/css-validator/issues/24
However if you try to validate in http://www.css-validator.org/ it works normally (select in More Options > Profile : CSS level 3 option, because otherwise it will use version 2.1) it will validate normally, see the result:
Considerations about the HTML
- nay use
abbr=, he is in disuse in Html5.
- The attribute
db is invalid.
- Instead of
db="" use the attribute data- which is specific to this type of task.
Now additional information:
- Missing tags
<body>, <head> and <title> if it does not validate
Validated HTML and CSS
<!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>
Validated 100% on:
Tips:
- It’s really nice to validate CSS and HTML, but it’s not that important, there are things like this that work but don’t validate, so just prefer to care if CSS works in all the browsers you want, even if it doesn’t validate.
- Many new features are appearing in the CSS, not all will be listed in the validator and these may appear false problems.
In short, try to validate whatever you can, but if something fails, don’t get so caught up in it, as long as it works on all the browsers your customers use (preferably the most modern ones), then everything will be fine.
Rose I understand now you left for this
{content: "NOME: ";}, but understand this{content: "NOME: ";}is different from this{content: attr(db);}, it is entirely possible to validate the{content: attr(db);}in http://www.css-validator.org as I said in the reply, but if the alternative solved you ok. :)– Guilherme Nascimento
I’m glad you liked the answers! The best way to thank those who helped you is to mark the best answer as accepted and vote for all who helped you. So you make sure that whoever wrote the answer gets something in return, in addition to making the site cleaner and more useful for everyone.
– Jorge B.