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>

效果图:
CSS td 右下角 左上角显示_第1张图片

你可能感兴趣的:(CSS)