HTML：如何使用colspan和rowpan？
[英]HTML: how to use colspan and rowspan?
問題描述
我正在嘗試構建一個非常簡單的數組，但是不知何故，它不起作用。 這是一個例子：
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table width=100%> <tr> <th colspan="8">sigle row of 8 cols</th> </tr> <tr > <td colspan="2">2 cols </td> <td rowspan="3" colspan="6" > 6 cols</td> </tr> <tr> <td colspan="2">2 cols</td> </tr> <tr> <td colspan="2">2 cols</td> </tr> </table> </body> </html>
請幫我調試。 我希望月份只占用2列，而節省要占用6列（其余），但是，這沒有按預期工作。 我知道答案很簡單，但我找不到。 你能告訴我出什么問題了嗎？
2 個解決方案
解決方案1
3 已采納 2017-10-31 06:41:02
該表將有8列，但實際上已將其減少到2列。表呈現算法將使事情變得盡可能高效。
通過添加其他行，您可以看到發生了什么
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table width=100%> <tr> <th colspan="8">Monthly Savings</th> </tr> <tr > <td colspan="2">January</td> <td rowspan="3" colspan="6" >$30000</td> </tr> <tr> <td colspan="2">February</td> </tr> <tr> <td colspan="2">March</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </body> </html>
您最好做的是為列分配寬度
table, th, td { border: 1px solid black; }
<table width=100%> <tr> <th colspan="2">Monthly Savings</th> </tr> <tr > <td style="width:33%">January</td> <td rowspan="3" style="width:66%" >$30000</td> </tr> <tr> <td>February</td> </tr> <tr> <td>March</td> </tr> </table>
解決方案2
1 2017-10-31 06:37:03
因為您將heading in single <th>添加heading in single <th>所以使id不同
<th colspan="2">Monthly</th>
<th colspan="6">Savings</th>
因此它將顯示2 for month ， 6 for saving
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table width=100%> <tr> <th colspan="2">Monthly</th> <th colspan="6">Savings</th> </tr> <tr> <td colspan="2">January</td> <td rowspan="3" colspan="6">$30000</td> </tr> <tr> <td colspan="2">February</td> </tr> <tr> <td colspan="2">March</td> </tr> </table> </body> </html>
如何使用 Flex CSS 並模擬 rowspan 2 和 colspan 2
[英]How to use Flex CSS and simulate a rowspan 2 and colspan 2
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.