zoukankan      html  css  js  c++  java
  • table元素使用bug

    一、问题的产生

    javaWeb课上老师让我们用表单做一个简单的自我介绍,但是在对表单里的单元格进行合并时出现了变形的情况,这里做个记录.

    二、实验
    1. 让我们先做一个简单的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>
      

      image-20201007153927476

    2. 合并

      需求:合并第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>
      

      image-20201007164731740

      注:可以看到此时页面发生了变形

    3. 解决:仅设置第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>
      

      image-20201007154538747

    三、总结
    1. 不知道有没有人和我一样,在最初学习单元格时,我们总是想象有一个行列整齐的表格(如第一张图),然后根据具体的需求对单元格进行合并,而这种方法导致的问题便是单元格的变形,目前的原因还无法确定,但是对于css的非正交性也算是有了一定直观的认识
    2. 解决这一问题的方法在于不要在同一个<td>元素中同时设置colspan和rowspan两个属性
  • 相关阅读:
    Winform中多线程无法访问使用 Control.CheckForIllegalCrossThreadCalls = false;
    PV操作-生产者/消费者关系
    table表格长度超出屏幕范围,可滑动
    Koa2中间件计算响应总耗时/设置响应头/读取Json文件返回给客户端
    Koa2简介和搭建
    计算机浮点数的表示和运算
    CSS实现Loading加载中动画
    RPC
    Git常用命令
    如何解决 shell 脚本重复执行的问题
  • 原文地址:https://www.cnblogs.com/Arno-vc/p/13777925.html
Copyright © 2011-2022 走看看