CSS/HTML-table表格使用方法

1 篇文章 0 订阅

border-collapse:属性设置表格的边框是否被折叠成一个单一的边框或隔开。-css用法

通俗讲就各个单元格的边框将会合并在一起。

table
{
    border-collapse:collapse;
}

colspan :这个属性就是定义两个左右相邻的单元个是否合并

通俗说,如果这个表格有多少列,colspan后面的数字就输入多少个,起到了合并单元格的作用。已输入改属性单元格开始合并,到输入的合并数量位置。

<tr>
                
    <td colspan="2" style="text-align: left; padding-left:50px">
    <input type="submit" value="提交">
    </td>

</tr>

rowspan:这个属性就是定义两个上下相邻的单元个是否合并

通俗说,如果这个表格有多少行,colspan后面的数字就输入多少个,起到了合并单元格的作用。已输入改属性单元格开始合并,到输入的合并数量位置。

<tr>
	<td rowspan="2">1</td>
	<td rowspan="2">Jack</td>
	<td>Chinese</td>
</tr>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想要将表格的第一行作为一个整体设置背景图片,可以使用 `slot-scope` 属性结合 `template` 标签来自定义表格的列和行的内容。你需要在模板中使用 `el-table-column` 组件来定义每一列的内容,然后将它们放在一个 `template` 标签中,这样这一行的所有列就会被包裹在一个容器中,从而实现将整行作为一个整体的效果。然后你可以在这个容器上设置背景图片来实现你的需求。 以下是一个示例代码: ```html <el-table :data="tableData"> <template slot-scope="scope" slot="header"> <div class="custom-header"> <el-table-column :label="$t('table.customLabel')"> <span>{{ scope.$index === 0 ? '第一行' : '' }}</span> </el-table-column> <el-table-column prop="target" label="目标值"></el-table-column> <el-table-column prop="finish" label="完成值"></el-table-column> <el-table-column prop="finishRate" label="完成率%"></el-table-column> </div> </template> <el-table-column prop="core" label="指标"></el-table-column> <el-table-column prop="target" label="目标值"></el-table-column> <el-table-column prop="finish" label="完成值"></el-table-column> <el-table-column prop="finishRate" label="完成率%"></el-table-column> </el-table> ``` 在这个示例中,我们使用 `slot-scope` 属性来访问表格头部的数据,并使用 `template` 标签来自定义表格列和行的内容。在自定义的表格头部中,我们使用了 `el-table-column` 组件来定义了每一列的内容,然后将它们放在了一个 `div` 容器中。这个 `div` 容器就是我们要用来包裹整行的元素。在这个容器上,你可以设置背景图片来实现你的需求。在 CSS 样式中,你可以通过 `.custom-header` 类名来设置这个容器的样式,从而实现将第一行作为一个整体的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值