如何修复 W3 验证错误：表格行宽 X 列，超过了第一行 (X) 建立的列数

Question

I ran this table in the W3 validator and it fails. I get this message "Error A table row was 6 columns wide and exceeded the column count established by the first row (2)".

 table td:not(:first-of-type) { display: block; } table{ border-collapse: collapse; } table *{ vertical-align: top; } thead{ border-bottom: 1px solid #a1afba; } th,td { padding: 3px 15px 3px 0; } td:last-of-type{ padding-bottom: 20px; }

 <table> <thead> <tr> <th scope="col">Dates</th> <th scope="col">Price per week</th> </tr> </thead> <tr> <td>00/00/00 - 00/00/00</td> <td>lorem $000</td> <td>lorem $000</td> <td>lorem $000</td> <td>lorem $000</td> </tr> <tr> <td>00/00/00 - 00/00/00</td> <td>lorem $000</td> <td>lorem $000</td> </tr> </table>

I tried adding colspan="1" to the the "dates" th, and colspan="100" to the "price per week" th, since the number of tds for the prices can be any, but I still get the warning in W3.

How can i get rid of the error?

Thanks in advance!

Answer 1

Each row (tr) has to have the same amount of cells (td). Except if you are using colspan, but then the sum of the spanned cells and the other (single) cells still have to be the same amount.

So your table have to look like this:

 <table> <thead> <tr> <th scope="col">dates</th> <th scope="col">price per week</th> </tr> </thead> <tr> <td>00/00/00 - 00/00/00</td> <td>lorem $000</td> </tr> <tr> <td></td> <td>lorem $000</td> </tr> <tr> <td></td> <td>lorem $000</td> </tr> <tr> <td></td> <td>lorem $000</td> </tr> <tr> <td>00/00/00 - 00/00/00</td> <td>lorem $000</td> </tr> <tr> <td></td> <td>lorem $000</td> </tr> </table>