HTML <tbody> 标签---带有 thead、tbody 以及 tfoot 元素的 HTML 表格

本文记录了两个月的储蓄情况,总计储蓄金额为180美元。一月份储蓄100美元,二月份储蓄80美元。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>


効果
MonthSavings
Sum$180
January$100
February$80

<!-- 表格 --> <div class="table-container"> <table border style="width: 100%; border-collapse: collapse" ref="drugTableRef" > <thead> <tr> <th>药品编号</th> <th>药品名称</th> <th>领入方库存</th> <th>领出方库存</th> <th>领用数量</th> <th></th> </tr> </thead> <tbody> <tr v-for="(row, index) in tableData" :key="index"> <!-- 药品编号 --> <td width="80"> <span type="text">{{ row.commodity_no }}</span> </td> <!-- 药品名称 --> <td> <div type="text">{{ row.commodity_name }}</div> <div type="text" style="color: #999; font-size: 11px"> {{ row.size }} </div> </td> <!-- 领入方库存 --> <td width="120"> <input type="number" v-model.number="row.total_num" disabled /> </td> <!-- 领出方库存 --> <td width="120"> <input type="number" v-model.number="row.total_num" disabled /> </td> <!-- 出库数量 --> <td width="180"> <div class="input-group"> <el-input v-model="row.memory_num" class="custom-input" @change="handle_stock_num(row, 'memory_num')" > <template #append> <div class="unit">{{ row.unit || '' }}</div> </template> </el-input> <el-input v-model="row.split_memory_num" class="custom-input" @change="handle_stock_num(row, 'split_memory_num')" > <template #append> <div class="unit"> {{ row.min_dose_unit || '' }} </div> </template> </el-input> </div> </td> <!-- 操作 --> <td width="35"> <el-popover placement="right" trigger="click" width="160" popper-style="padding: 10px;" :ref="(el) => setPopoverRef(el, index)" > <div style="text-align: right; margin: 0"> <el-button size="small" link type="danger" @click="removeRow(index)" >确认删除</el-button > <el-button link size="small" type="primary" @click="closePopover(index)" >取消</el-button > </div> <template #reference> <el-button size="small" link type="danger" circle> <bc-icon name="ele-CloseBold" class="icon" ></bc-icon> </el-button> </template> </el-popover> </td> </tr> </tbody> </table> </div> <!-- 表格 --> 表格下面 表格尾 加个品种,总数量
最新发布
07-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值