html-HTML中table实现相应式导航,第一列固定,其余列根据页面宽度,出现滚动条来显示。

问题描述

HTML中table实现相应式导航,第一列固定,其余列根据页面宽度,出现滚动条来显示。

效果图如上所示,来自文章http://isux.tencent.com/responsive-web-design.html ,在文章中讲到的第三种方法,实现的方法其实有写,

  thead {float:left;}  tbody {display:block;width:auto;overflow-x:auto;}

但是,在尝试这种方法时,总是会出现问题,thead跟tbody在页面变窄时,会错位,并不能实现上面的效果,有没有人用过这个方法呢?很紧急的问题,谢谢了!

时间: 2024-12-22 05:06:12

html-HTML中table实现相应式导航,第一列固定,其余列根据页面宽度,出现滚动条来显示。的相关文章

响应式导航的设计模式

在大屏幕上,导航置顶或导航居左是两种典型的设计模式,然而,这两种模式在小屏幕上却遭遇挑战.在响应式设计日渐流行的今天(译者注:其实已经流行了好几年了),我们更有必要重新审视针对小屏幕环境下的导航设计模式.这些通过移动设备访问的页面导航,必须既方便用户快速访问,又不能过于突出. 以下,我列出了 7 种常见的响应式导航的设计模式,它们分别是: 置顶(或"放任自流") 页脚锚点 菜单选择 开关 侧滑 置底 彻底隐藏 上述每种设计模式都各有利弊,大家在选择导航设计方案时,需要根据项目的实际情况

响应式导航有哪几类设计方式?

  在大屏幕上,导航置顶或导航居左是两种典型的设计模式,然而,这两种模式在小屏幕上却遭遇挑战.在响应式设计日渐流行的今天(译者注:其实已经流行了好几年了),我们更有必要重新审视针对小屏幕环境下的导航设计模式.这些通过移动设备访问的页面导航,必须既方便用户快速访问,又不能过于突出. 以下,我列出了 7 种常见的响应式导航的设计模式,它们分别是: 置顶(或"放任自流") 页脚锚点 菜单选择 开关 侧滑 置底 彻底隐藏 上述每种设计模式都各有利弊,大家在选择导航设计方案时,需要根据项目的实际

设计响应式导航菜单的5大法则

响应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.响应式设计允许你在不 同的平台上,创建独一无二的用户体验,与此同时,只要最少的维护工作. 已经有不少文章涉及响应式设计,这些文章帮助我们理解和解剖响应式网站设计的学习指南和教程,揭示媒体查询的作用,与此同时,还提供一些令人兴奋的响应式设计集合. 我们暂且先放开宏观上的响应式Web设计,把目光聚集在更具挑战性的"响应式导航菜单设

移动UI中的6种主要导航模式

  正如精良的设计一样,优秀的导航也大象无形.不管是浏览好友信息,还是租赁汽车,完美的导航设计能让用户根据直觉使用应用程序,也能让用户非常容易地完成 所有任务.一款应用的导航可以被设计成各种样式,但我想着重介绍6种主要的导航模式,也就是主菜单的导航模式. 跳板式 跳板式导航对操作系统并没有特殊要求,在各种设备上都有良好表现.它有时也被称为"快速启动板"(Launchpad).跳板式导航的特征是,登录界面中 的菜单选项就是进入各个应用的起点.Facebook 应用沿用了iOS 主界面上的

Bootstrap组件之响应式导航条

响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示"LOGO/Brand",以及一个"菜单折叠展开按钮",只有单击折叠按钮后才显示所有的菜单项.   基础class: .navbar     1.Bootstrap中导航条的按位置: 1)顶部导航条 2)底部导航条    Bootstrap中导航条的按颜色: 1)浅色底深色的字 .navbar-default 2)深色底浅色的字 .navbar-inverse    Bootstrap中导

SQL Server中提前找到隐式转换提升性能的办法

原文:SQL Server中提前找到隐式转换提升性能的办法     http://www.cnblogs.com/shanksgao/p/4254942.html 高兄这篇文章很好的谈论了由于数据隐式转换造成执行计划不准确,从而造成了死锁.那如果在事情出现之前发现了这类潜在的风险岂不是更好?     那么我们来看一个简单的例子,如代码清单1所示.   1: SELECT * 2: FROM HumanResources.Employee 3: WHERE NationalIDNumber = 2

iOS实现顶部标签式导航栏及下拉分类菜单_IOS

本文实例为大家分享了iOS实现顶部标签式导航栏及下拉分类菜单的全部过程,供大家参考,具体内容如下 当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动和下拉动画显得比较生硬,刚发现quickTime可以直接录制手机视频,推荐一下,很方便) 1.顶部标签式导航栏 (1)实现思路 其实就是在上下两个UIScrollView上做文章,实现联动选择切换的效果

CSS3 media queries结合jQuery实现响应式导航_jquery

目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来:   思路: 1.为了之后在菜单上绑定事件,并且不向DOM中添加多余的节点,在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个.    所以我选择了将导航绝对定位. 2.默认导航列表是出现的,当屏幕宽度小于700px时它隐藏,并且设置position,当屏幕宽度大于700px时,它出现.或者,默认导航列表是隐藏的,当屏幕宽度大于700px时它出现在右侧

ActionBar详解(六)--->利用ActionBar结合Fragment实现下拉式导航

MainActivity如下: package cc.testsimpleactionbar5; import android.os.Bundle; import android.widget.ArrayAdapter; import android.app.ActionBar; import android.app.ActionBar.OnNavigationListener; import android.app.Activity; import android.app.FragmentTr