CSS td 右下角左上角显示

<html>

<head>
<title>table td左对齐 右对齐</title>
<style type="text/css">
.main-tb{border-spacing: 0;border-collapse: collapse;}
.main-tb td{text-align:center;vertical-align:middle;padding: 1px 6px 0 6px;}
/*td 文字显示左上角*/
.main-tb .td-explainleft{vertical-align:top;position:relative;}
.main-tb .td-explainleft div{position:absolute; left:0; top:0;}
.main-tb .td-explainleft input{margin-top: 25px;}
/*td 文字显示右下角*/
.main-tb .td-explainright{vertical-align:top;position:relative;}
.main-tb .td-explainright div{position:absolute; right:0; bottom:0;}
.main-tb .td-explainright .div-padding{padding: 0 10px 10px 0;}
</style>
</head>

<body>
<table class="main-tb" cellspacing="0" cellpadding="0" border="1" width="700px">
  		<tbody>
		<tr>
          <td height="150">
				<span>工作汇报</span> 
			</td>
			<td class="td-explainleft">
				<div>
					其他需要说明的情况：
				</div>
<br />
XXXXX
			</td>
		</tr>
		<tr>
			<td height="150">
				<span>单位意见</span> 
			</td>
			<td class="td-explainright">
				XXXXX
				<div class="div-padding">
					主要负责人签字：XXX
				</div>
			</td>
		</tr>
  </tbody>
</table>
</body>
</html>

效果图：
在这里插入图片描述

来源：CSDN

作者：戈壁楼兰

链接：https://blog.csdn.net/bananasssss/article/details/103857429

标签

css

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!

CSS td 右下角 左上角显示

CSS td 右下角左上角显示