<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5.略复杂表格练习</title>
</head>
<body>
<table>
<tr class="content">
<th class="bigTh1" colspan="2">发票号</th>
<td colspan="8">HRUGHERUI EQRGBQIUERBG ERGIERBG</td>
</tr>
<tr class="content">
<th class="bigTh1" colspan="2">发票金额</th>
<td colspan="3">人民币 1243.00</td>
<th class="bigTh1" colspan="2">货物名称</th>
<td colspan="3">小米13</td>
</tr>
<tr class="content">
<th class="bigTh1" colspan="2">交单方式</th>
<td colspan="3">1次交单</td>
<th class="bigTh1" colspan="2">期限类型</th>
<td colspan="3">JAJAEFBEF EGMK</td>
</tr>
<tr class="content">
<th class="bigTh1" colspan="2">付款期限(天)</th>
<td colspan="3">12</td>
<th class="bigTh1" colspan="2">运输单据号码</th>
<td colspan="3">AEWNFIHWEFUILEW</td>
</tr>
<tr class="content">
<th class="bigTh1" colspan="2">是否需要汇票</th>
<td colspan="3">是</td>
<th class="bigTh1" colspan="2">提单日期</th>
<td colspan="3">2023-02-05</td>
</tr>
<tr class="content">
<th class="bigTh1" colspan="2">托收日期</th>
<td colspan="8">2023-02-05</td>
</tr>
<tr class="content">
<th colspan="2" rowspan="3">单据/份数</th>
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
</tr>
<tr class="content">
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
</tr>
<tr class="content">
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
<th class="rightTH">DRAF</th>
<td class="rightTd">123</td>
</tr>
<tr class="content">
<th colspan="2" class="titletop">回单类型</th>
<td colspan="3">网上转账汇款</td>
<th colspan="2" class="titletop">指令序号</th>
<td colspan="3">15954575260</td>
</tr>
<tr class="content">
<th rowspan="4">收款人</th>
<th>户名</th>
<td colspan="3">张三</td>
<th rowspan="4">付款人</th>
<th>户名</th>
<td colspan="3">老刘</td>
</tr>
<tr class="content">
<th>卡号</th>
<td colspan="3">00000000001</td>
<th>卡号</th>
<td colspan="3">00000000002</td>
</tr>
<tr class="content">
<th>地区</th>
<td colspan="3">南京</td>
<th>地区</th>
<td colspan="3">杭州</td>
</tr>
<tr class="content">
<th>网点</th>
<td colspan="3">工商江苏南京业务处理中心</td>
<th>网点</th>
<td colspan="3">江苏徐州业务中心</td>
</tr>
<tr class="content">
<th class="bigTh1" colspan="2">币种</th>
<td colspan="3">人民币</td>
<th class="bigTh1" colspan="2">汇票标志</th>
<td colspan="3">钞票</td>
</tr>
<tr class="content">
<th class="bigTh1" colspan="2">金额</th>
<td colspan="3">1.00元</td>
<th class="bigTh1" colspan="2">手续费</th>
<td colspan="3">0.75元</td>
</tr>
<tr class="content">
<th class="bigTh1" colspan="2">合计</th>
<td colspan="8">人民币(大写):壹</td>
</tr>
<tr class="content">
<th class="bigTh1" colspan="2">交易时间</th>
<td colspan="3">2023年02月05日</td>
<th class="bigTh1" colspan="2">时间戳</th>
<td colspan="3">2023-02-05-19.00.00.0000</td>
</tr>
</table>
</body>
<style>
table {
border-collapse: collapse;
width: 900px;
table-layout: fixed;//用来解决无法给td设置宽度的问题
}
table .content {
height: 48px;
}
table .content .titletop {
width: 200px;
}
table .content th {
background-color: rgb(248, 236, 236);
}
table .content .bigTh1 {
width: 200px;
}
table .content td {
box-sizing: border-box;
/* width: 300px; */
padding-left: 15px;
}
table .content th,td {
border: 1px solid gray;
}
table .content .rightTh,.rightTd {
width: 135px;
}
</style>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
