div 实现table 表格自适应

最新推荐文章于 2022-07-14 13:29:08 发布
最新推荐文章于 2022-07-14 13:29:08 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： vue.js Ant design 文章标签： js tablet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45796807/article/details/113395858
版权
本文介绍了如何利用CSS样式和模板技术，创建一个能够自适应浏览器缩放的表格布局。通过data部分和特定的CSS规则，实现了div元素模拟table的功能，确保在平板等设备上也能良好显示。
摘要由CSDN通过智能技术生成

1、实现样式，自适应跟随浏览器拖动缩放在这里插入图片描述
1、template 模板

	<template>
  <div>
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane
        v-for="(item, index) in dataListTitle"
        :key="index"
        :tab="item.alias"
      >
        <div class="box">
          <div class="tabletitle">
            <div class="titleHeader">点位</div>
            <div class="titleHeader">二维码</div>
            <div class="titleHeader">监控对象</div>
            <div class="titleHeader">监控实体</div>
            <div class="titleHeader">检查项</div>
            <div class="titleHeader">操作</div>
          </div>
          <div>
最低0.47元/天 解锁文章
weixin_45796807
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div中table的宽度超过div的宽度问题
小李的专栏
03-12 1万+
div中table的宽度超过div的宽度问题 首先注意table的一个样式 table { table-layout:fixed; } tableLayout 属性用来设定表格单元格、行、列显示属性。 table-layout有以下取值： 值 描述 automatic 默认。列宽度由单元格内容设定 fixed 列宽由表格宽度和列...
自适应Table表格响应式
ICode联盟
12-20 116
下载地址 一款div和css3响应式表格特效。 dd:
如何设置HTML页面table(表格)自适应宽度，网页缩放问题
热门推荐
qq_43128070的博客
07-01 1万+
如果没有<table>没有设置，那么网页缩放的时候就会出现以下情况。 解决办法： <table style="width:100%;table-layout:fixed;" class="Table1" runat="server"> <tr> <td style="width:15%;word-wrap:break-word;" class="lable">职务名称<span style...
CSS - table超出父级div
Jim Suen
12-06 7363
用到div包裹table的布局，想要的效果是table的宽度等于div宽度，超出内容省略号显示。 听起来很简单啊，设置table宽度为100%，省略号三行代码往上一粘，心想着大功告成。 but！！！！页面效果发现其中一行数据较长，导致table其实是超出了父级div。 原因 查资料后发现原来table有不一样的默认样式table-layout，它的值是这样的： 值 描述 autom...
html td 长度适配,table的td宽度自适应
weixin_32702015的博客
06-05 7912
table中添加样式 style="width:100%;"，有用请喜欢；//用样式比较规范； 如何设置HTML页面自适应宽度的table 1 2 3 4 5 如何设置HTML页面自适应宽度的tabletable的标题栏固定，根据浏览器定位，并且td 宽度定位的话可以用position属性。 如果是滚动屏幕table标题栏不动的话可以设置display:fixed;如何设置HTML页面自适应宽度的...
html table宽度自动,Html Table自适应宽度，指定列固定宽度，其他列均分宽度
weixin_35700754的博客
05-31 5081
做表单界面时，我想到最好的方法应该是，标题栏所在的列宽度固定，内容栏所在的列宽度自适应且要均分，这样整体表格看起来才美观有序。要做到这一点，目前只摸索出一种办法：1，给table加table-layout: fixed;2，在每个table的第一行，加，有多少列，对应加多少个3，给指定列固定宽度的加成，然后给title定义宽度，其他列的加成案例代码：案例文档table{width: 100%;bo...
自适应Table表格样式代码.zip
07-05
在这个"自适应Table表格样式代码.zip"压缩包中，我们主要关注的是如何使用HTML和CSS3来创建一个响应式的表格，以实现跨平台的良好用户体验。此外，JavaScript也可能被用来增强表格的功能，如交互性或动态调整。 ...
HTML 自动伸缩的表格Table js实现
10-30
在本文中，我们将讨论一种名为AutoTableSize的JavaScript解决方案，它允许表格在页面加载时根据最长单元格的行数自适应调整行高。以下是这个功能的实现原理和步骤： 1. **AutoTableSize函数**：该函数接受一个可选...
表格自适应手机页面
08-27
"表格自适应手机页面"这一主题正是关注如何使传统的HTML表格在手机等小屏幕设备上呈现得更加友好。在这个过程中，主要涉及到的技术是响应式设计，通过调整表格的布局和样式，确保在不同尺寸的屏幕上都能清晰、易读。...
jqGrid的自适应表格
12-27
在这个"jqGrid的自适应表格"示例中，我们将探讨如何利用jqGrid实现表格的自适应窗口大小，以及在单元格数据过多时如何优雅地处理显示。 首先，要创建一个基本的jqGrid，你需要在HTML文件中引入jQuery库和jqGrid的...
Bootstrap table表格初始化表格数据的方法
10-18
height: tableHeight(), // 行高，如果没有设置，表格会自适应 uniqueId: "Id", // 每行的唯一标识 showToggle: false, // 是否显示详细视图和列表视图切换 cardView: false, // 是否显示详细视图 detailView: ...
table自适应宽度
weixin_34248849的博客
06-28 3454
WEB应用的页面，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容自适应到不同分辨率的屏幕，这应该是一个比较容易遇到的问题，下面就来谈一谈我对这类问题的解决与看法。 将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在Bigtree看来，比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——...
用DIV轻松实现自适应Table
chezaotu5026的博客
11-13 588
<body> <div style="display:table;border:1px red solid;width:100%;"> <div style="display:table-caption;text-align:center;">My...
js实现td内的div标签适应自身高度和宽度
weixin_33943836的博客
03-02 1045
td 、div标签的高度一般是根据标签内的内容而变化的 当div在td标签内是很难使div完全填充td标签。 可以通过js实现： js $(".cols1").height($(".cols2").height() - 40); var top = $(".cols1").height() / 2; html <table>&l...
前端开发之div实现table表格系列教程三：参数说明
gz_gy的专栏
08-20 268
var table=$k('#table1').table(config); 一、config参数： 1、splitColWidth：是否允许鼠标拖动调整列宽，默认为true。 例如： $k('#table1').table() //允许 $k('#table1').table({splitColWidth:true}) //允许 $k('#table1').table({splitColWidth:false}); //不允许 二、方法： 1、draggable(dragConfig) var table
html设置表格固定宽度,HTML：当表格在固定宽度的div内时，如何增加表格列的宽度...
weixin_42298971的博客
06-15 484
以下一段HTML代码在固定宽度的div内创建表格。看起来“th，td”宽度是从父div继承的(但W3文档说它不是继承的属性！)。HTML：当表格在固定宽度的div内时，如何增加表格列的宽度如何增加表列的宽度(比如500px)？您可以看到，更改“th，td”选择器中的宽度值对宽度没有任何影响。请注意：- 我不想改变div的宽度- 我不想一个固定的宽度设置为我的桌子- 我已经尝试了“表布局：固定;”里...
HTML表格在浏览器中自适应（表格宽高不变表格下面有滑动条）
sh2001824的博客
07-14 1861
表格下面有滑动条（响应式表格）
vue如何让一个div占满全屏_如何编写一个 vue 指令
weixin_39789206的博客
12-28 560
今天碰到需要表格滚动加载的功能，表格拉到底部加载更多，表格是第二次封装element-ui的表格，可以通过 height 属性固定表格的表头。本文通过学习 以下文章实现一个简单的 vue 无限加载指令​www.jianshu.comVue.directive("load-more", { bind(el, binding, vnode) { let throttle = (after,...
vue table表格高度自适应
最新发布
05-31
可以通过设置表格的高度为"auto"，让表格高度自适应，如下所示： ```html <template> <div> <el-table :data="tableData" :height="'auto'"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </div> </template> ``` 同时，如果表格数据较多，可以设置表格的最大高度和溢出方式，如下所示： ```html <template> <div> <el-table :data="tableData" :height="'auto'" :style="{ 'max-height': '300px', 'overflow-y': 'auto' }"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </div> </template> ``` 这样可以让表格在数据较多时，自适应高度，并且超出最大高度时，出现滚动条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值