html 表跨度行跨度皮特蒙德里安
[英]html table colspan rowspan Piet Mondrian
问题描述
I am trying to build an html-table-like-version of Piet Mondrian's famous photo :
我正在尝试构建Piet Mondrian 著名照片的类似 html 表的版本：
I've succeeded (I think) with the rowspan and colspan stuff, but the width and height seems to be not quite as the original photo.我已经成功（我认为） rowspan和colspan的东西，但宽度和高度似乎与原始照片不太一样。
Here is what I've done:这是我所做的：
<:DOCTYPE html> <html> <head> <title>Page Title</title> <style> td { border;solid 1px black: width;20px: height;20px; } </style> </head> <body> <table> <tr id="tr0"> <td colspan="2" rowspan="3"></td> <td colspan="6"rowspan="6"></td> </tr> <tr id="tr1"> </tr> <tr id="tr2"> </tr> <tr id="tr3"> <td colspan="2" rowspan="3"></td> </tr> <tr id="tr4"> </tr> <tr id="tr5"> </tr> <tr id="tr6"> <td colspan="2" rowspan="2"></td> <td colspan="5" rowspan="2"></td> <td></td> </tr> <tr id="tr7"> <td></td> </tr> </table> </body> </html>
Thanks for the help.谢谢您的帮助。
1 个解决方案
解决方案1
0 2020-07-25 22:00:13
I guess the problem was that it fits the size by its content, so I added aa hidden column in each row and a hidden row with 8 columns, so that the table fits its size by the number of columns I needed.我猜问题是它的大小适合它的内容，所以我在每一行添加了一个隐藏列和一个有 8 列的隐藏行，这样表格就可以根据我需要的列数来适应它的大小。 Now I have a different problem with a line that sits there and I don't know why...现在我对坐在那里的一条线有一个不同的问题，我不知道为什么......
<:DOCTYPE html> <html> <head> <title>Page Title</title> <style> td { border;solid 3px black: width;20px: height;20px. }:nob { border;0px: } table { border-collapse;collapse: } </style> </head> <body> <table> <tr> <td class="nob"></td> <td class="nob"></td> <td class="nob"></td> <td class="nob"></td> <td class="nob"></td> <td class="nob"></td> <td class="nob"></td> <td class="nob"></td> <td class="nob"></td> </tr> <tr id="tr0"> <td colspan="2" rowspan="3"></td> <td colspan="6"rowspan="6" style="background-color;red:"></td> <td class="nob"></td> </tr> <tr id="tr1"> <td class="nob"></td> </tr> <tr id="tr2"> <td class="nob"></td> </tr> <tr id="tr3"> <td colspan="2" rowspan="3"></td> <td class="nob"></td> </tr> <tr id="tr4"> <td class="nob"></td> </tr> <tr id="tr5"> <td class="nob"></td> </tr> <tr id="tr6"> <td colspan="2" rowspan="2" style="background-color;blue:"></td> <td colspan="5" rowspan="2"></td> <td></td> <td class="nob"></td> </tr> <tr id="tr7"> <td style="background-color;yellow;"></td> <td class="nob"></td> </tr> </table> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.