mui 左右可滑动的表格

最新推荐文章于 2024-06-18 09:40:23 发布
最新推荐文章于 2024-06-18 09:40:23 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： mui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_24743861/article/details/102727795
版权

 

<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title"></h1>
		</header>
		<div class="mui-content">
			<div style="overflow: auto;padding: 0 0 10px 0;">
				<table border="1" class="tab_css_1">
					<thead>
						<th>顺号</th>
						<th>01</th>
						<th>02</th>
						<th>03</th>
						<th>04</th>
						<th>05</th>
						<th>06</th>
						<th>07</th>
						<th>08</th>
						<th>09</th>
						<th>10</th>
						<th>11</th>
						<th>12</th>
						<th>13</th>
						<th>14</th>
						<th>15</th>
						<th>16</th>
						<th>17</th>
						<th>18</th>
						<th>19</th>
					</thead>
					<tr class="tr_css" align="center">
						<td>第一行</td>
						<td id="cz01"></td>
						<td id="cz02"></td>
						<td id="cz03"></td>
						<td id="cz04"></td>
						<td id="cz05"></td>
						<td id="cz06"></td>
						<td id="cz07"></td>
						<td id="cz08"></td>
						<td id="cz09"></td>
						<td id="cz10"></td>
						<td id="cz11"></td>
						<td id="cz12"></td>
						<td id="cz13"></td>
						<td id="cz14"></td>
						<td id="cz15"></td>
						<td id="cz16"></td>
						<td id="cz17"></td>
						<td id="cz18"></td>
						<td id="cz19"></td>
					</tr>
					<tr class="tr_css" align="center">
						<td>第二行</td>
						<td id="dy01"></td>
						<td id="dy02"></td>
						<td id="dy03"></td>
						<td id="dy04"></td>
						<td id="dy05"></td>
						<td id="dy06"></td>
						<td id="dy07"></td>
						<td id="dy08"></td>
						<td id="dy09"></td>
						<td id="dy10"></td>
						<td id="dy11"></td>
						<td id="dy12"></td>
						<td id="dy13"></td>
						<td id="dy14"></td>
						<td id="dy15"></td>
						<td id="dy16"></td>
						<td id="dy17"></td>
						<td id="dy18"></td>
						<td id="dy19"></td>
					</tr>
				</table>
			</div>

		</div>
table th {
	white-space: nowrap;
}

table td {
	white-space: nowrap;
}

body,
table {
	font-size: 12px;
}

table {
	empty-cells: show;
	border-collapse: collapse;
	margin: 0 auto;
}

table.tab_css_1 {
	border: 1px solid #cad9ea;
	color: #666;
}

table.tab_css_1 th {
	background-color: #FFFFFF;
	height: 30px;
}

table.tab_css_1 td,
table.tab_css_1 th {
	border: 0.5px solid #e5e5e5;
	padding: 0 1em 0;
}

table.tab_css_1 tr.tr_css {
	background-color: #FFFFFF;
	height: 30px;
}

 

baidu_24743861
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Mui】后台框架之表格控件
08-12 754
1.表格控件基本用法 jQuery(document).ready(function () { //初始化表格控件 var grid1 = $("#grid").grid({ title: "测试表格", columns: [ { ...
mui实现表格
热门推荐
u013720726的博客
09-04 2万+
mui的css文档中没有向bootstrap中类似的写好的样式供调用，但是用table显示表格本身就不难看，再写一些CSS类完全可以放到网页中，下面提供代码：<head> <style> .table { border: 1px solid #cad9ea; color: #666; }
推荐开源项目：mui-virtualized-table —— 高效数据表的不二选择
最新发布
gitblog_00080的博客
06-18 359
推荐开源项目：mui-virtualized-table —— 高效数据表的不二选择 项目地址:https://gitcode.com/techniq/mui-virtualized-table 在大数据时代，表格的高效展示成为了一个重要的话题。当你的应用需要处理大量行和列的数据时，如何既保持界面流畅又不失美观？mui-virtualized-table 正是为此而生，它巧妙地结合了Materia...
mui-drip-table-demo:简单表
04-29
滴灌表演示 ・ mui-drip-table的示范画面（v0.2.3〜1.0.0） 演示页面 ・
MUI列表滑动操作
mypowerhere的专栏
08-15 5104
前言：通过MUI等目前流行的前端框架，我们可以生成接近原生APP体验的界面。列表滑动操作，使用了mui-table-view和mui-slider两个组件。1.界面部分：注：需要引入mui的样式和脚本外链&lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=...
html-mui-页面布局表格左右
jieweiwujie的博客
09-01 924
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>页面布局<...
mui简单的表单案例
weixin_45787600的博客
03-17 1606
效果图： html： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>mui表单</ti.
HBuilder MUI 中添加固定列固定表头的表格,单元格根据宽度自适应
你好邱林和的专栏
01-30 1万+
HBuilder MUI 中想要实现:添加固定列固定表头的表格,单元格根据宽度自适应,参考如下链接:https://www.douban.com/note/286673563/,还有他的github封装好的android的工程文件,链接如下:移动端固定列js工具,只要把这些文件放在html中,就可以实现固定前几列,然后水平和竖向滚动:       1.导入js和css文件:    2.接着
muidemo整理测试
02-16
4. **手势支持**：MUI支持滑动、触摸等手势，例如，可以学习如何配置下拉刷新（pullRefresh）和上拉加载（loadMore）功能，使用户通过简单的手势就能获取新内容。 5. **性能优化**：MUI框架注重性能，比如使用延迟...
mui（css+js）资源
04-22
MUI 的 CSS 部分遵循扁平化设计原则，提供了一套完整的 UI 组件库，包括按钮、导航栏、列表、表格、弹窗、提示等。这些组件都经过精心优化，适配了多种屏幕尺寸，确保在不同设备上的视觉一致性。开发者可以通过简单...
MUI 演示演示
02-05
2. **表格（Table）**：MUI 的表格组件支持多列数据展示，可以设置排序、筛选等功能，适应数据密集型的界面设计。 3. **导航（Nav）**：MUI 提供了底部TabBar、顶部NavBar等多种导航模式，确保用户在应用中的流畅...
mui-data-table:React物料的数据表-UI
05-09
Mui数据表 重要通知： 该项目不再得到积极维护，因此我将无法响应问题或接受新的或现有的拉取请求。 下面列出了替代方案： 数据表实现 Mui数据表是出于将与集成在一起的需要而提出的。 它通过用新的行为扩展材料ui已经提供的表格组件来实现这一点。 Mui数据表仍在积极开发中，并且仍计划添加更多功能以使其更健壮和灵活。 演示版 特征 分页 搜索/过滤 自定义渲染器/格式化程序 依存关系 React Material-ui Mui数据表是一个React组件，因此，您需要在安装此软件包之前安装React。 您还需要确保在应用程序中使用material-ui组件库。 安装 Mui数据表以npm软件包的形式提供，您可以使用以下命令从命令行进行安装： npm install mui-data-table --save 用法 Mui数据表的设计易于使用。 它具有一个非常简单的api，您所要做
mui-table:改进的Material-UI表
05-14
多功能桌 通过data和columns道具简化了视觉组件的使用。 有关正在运行的<MuiTable>示例，请参见或查看 注意：基于react-virtualized的1.xx版本现已作为
material-table-demo:mui表演示
05-08
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加自定义环境变量 在HTML中引用环境变量 在Shell中添加临时环境变量 在.env添加开发环境变量 我可以使用装饰器吗？ 与API后端集成 节点 Ruby on Rails 在开发中代理API请求手动配置代理 在开发中使用HTTPS 在服务器上生成动态<meta>标记 预渲染为静态HTML文件 将数据从服务器注入页面 运行测试 文件名约定 命令行界面 版本控制集成 写作测试 测试组件 使用第三方声明库
js实现漂亮的table表格
07-26
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
mui完整例子
06-03
1. **导航栏（Navbar）**：提供顶部导航功能，可设置标题、返回按钮、右侧操作按钮等。 2. **按钮（Button）**：包含各种样式和类型的按钮，如普通按钮、浮动按钮、切换按钮等。 3. **列表（List）**：支持多种列表...
mui惯性聚合
06-20
mui不仅包含了丰富的UI组件，如按钮、表格、轮播图等，还提供了诸如下拉刷新、上拉加载、侧滑删除等常见功能的实现，极大地提高了开发效率。 **二、惯性滚动** 惯性滚动是指当用户快速滑动页面后，页面会继续按照...
table固定头部，表格tbody可上下左右滑动
淡水无华的博客
11-03 1万+
纯css实现表头固定
mui tab 不设置左右滑动切换
05-18
如果你想禁止 MUI Tab 组件的左右滑动切换功能，可以通过以下两种方法实现： 1. 使用 CSS 样式 在 MUI Tab 组件所在的页面或组件中，添加如下 CSS 样式： ``` .mui-slider-handle { pointer-events: none; } ``` 这样可以禁用滑动切换功能，但仍可通过点击 Tab 来进行切换。 2. 使用 `mui-scroll-wrapper` 组件 在 MUI Tab 组件所在的页面或组件中，使用 `mui-scroll-wrapper` 组件来包裹 Tab 组件，如下所示： ```html <div class="mui-scroll-wrapper"> <!-- Tab 组件 --> <div class="mui-slider"> <div class="mui-scroll"> <a class="mui-control-item mui-active" href="#tab1">Tab 1</a> <a class="mui-control-item" href="#tab2">Tab 2</a> <a class="mui-control-item" href="#tab3">Tab 3</a> </div> </div> </div> ``` 然后在 JavaScript 中初始化 `mui-scroll-wrapper` 组件，如下所示： ```javascript mui('.mui-scroll-wrapper').scroll({ scrollX: false, // 禁止水平滑动 scrollY: true, // 允许垂直滑动 indicators: false // 禁用下拉刷新和上拉加载提示 }); ``` 这样可以完全禁止滑动切换功能，只能通过点击 Tab 来进行切换。同时，也可以通过 `scrollY` 属性来控制是否允许垂直滑动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值