html 表怎么会有未对齐的单元格边框

Question

I am struggling to make a html table that copies the layout of the table above. I am just wondering what techniques to use and to recreate that table

I have tried nested tables and have looked into using div instead to create this but am still having issues, mainly with the way that the lines are presented in this and are not in an obvious layout

Answer 1

Here is a cool tool:

https://tabletag.net/

Here you need to nest a table in the second row

 table, td, th { border: 1px solid #595959; border-collapse: collapse; } td, th { padding: 3px; width: 30px; height: 25px; } th { background: #f0e6cc; }.even { background: #fbf8f0; }.odd { background: #fefcf9; }

 <table> <tbody> <tr> <td colspan="3"></td> <td colspan="5"></td> <td colspan="3" rowspan="2"></td> </tr> <tr> <td colspan="3"></td> <td colspan="5"></td> </tr> <tr> <td colspan="6"></td> <td colspan="5"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>