一、问题的产生
javaWeb课上老师让我们用表单做一个简单的自我介绍,但是在对表单里的单元格进行合并时出现了变形的情况,这里做个记录.
二、实验
-
让我们先做一个简单的4*4表格
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> td{ border: 1px solid black; 100px; height: 50px; text-align: center; background-color: purple; color: white; } </style> </head> <body> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> </body> </html>
-
合并
需求:合并第2,3行,且每行仅显示两列
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> td{ border: 1px solid black; 100px; height: 50px; text-align: center; background-color: purple; color: white; } </style> </head> <body> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td colspan="2" rowspan="2"> 2 <br> 2 </td> <td colspan="2" rowspan="2"> 3 <br> 3 </td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> </body> </html>
注:可以看到此时页面发生了变形
-
解决:仅设置第2行的colspan,而不设置rowspan
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> td{ border: 1px solid black; 100px; height: 50px; text-align: center; background-color: purple; color: white; } </style> </head> <body> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td colspan="2"> 2 <br> 2 </td> <td colspan="2"> 3 <br> 3 </td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> </body> </html>
三、总结
- 不知道有没有人和我一样,在最初学习单元格时,我们总是想象有一个行列整齐的表格(如第一张图),然后根据具体的需求对单元格进行合并,而这种方法导致的问题便是单元格的变形,目前的原因还无法确定,但是对于css的非正交性也算是有了一定直观的认识
- 解决这一问题的方法在于不要在同一个
<td>元素中同时设置colspan和rowspan两个属性