精华内容
下载资源
问答
  • 这是一款非常美观的响应式css3表格样式代码,网页table表格的默认样式比较普通,这款经过css3美化的表格就显得非常出众了,而且浏览器宽度窄的时候会变成纵排,相当灵活实用。
  • 响应式表格布局

    2018-01-20 11:16:00
    响应式表格布局 通过css媒体查询捕捉浏览器的大小,来改变css样式,本例是改变表格的样式 html <!DOCTYPE html> <html lang="en"> <head> &...

    响应式表格布局

    通过css媒体查询捕捉浏览器的大小,来改变css样式,本例是改变表格的样式

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>响应式表格布局</title>
        <link rel="stylesheet" type="text/css" href="begin.css" />
    </head>
    <body>
        <h1>课程</h1>
        <table class="responsive">
            <thead>
            <tr>
                <th>程序序号</th>
                <th>课程名称</th>
                <th>课程操作</th>
            </tr>
            </thead>
            <tr>
                <td class="number">150406</td>
                <td class="name">移动应用开发</td>
                <td class="actions">
                    <a href="#">修改</a><a href="del">删除</a>
                </td>
            </tr>
            <tr>
                <td class="number">150407</td>
                <td class="name">HTML前段开发</td>
                <td class="actions">
                    <a href="#">修改</a><a href="del">删除</a>
                </td>
            </tr>
        </table>
    </body>
    </html>

    css

    h1{
        font-size: 30px;
        text-align: center;
        color: #666666;
    }

    <!-- 设置表格外边框 --> table.responsive{ width: 98%; margin: 0 auto; border: 1px solid #666666;
      <!-- 设置表格单元格边框合并在一起 --> border-collapse: collapse; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .6); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .6); box-shadow: 0 0 10px rgba(0, 0, 0, .6); }
    <!-- 设置表格单元格边框 --> table.responsive th,table.responsive td{ border: 1px solid #666666; padding: .5em 1em; }
    <!-- 设置表头颜色 --> table.responsive th{ background: #35B558; }
    <!-- 设置超链接格式 --> table.responsive .actions a{ color: #ff5c00;
      <!-- 设置超链接字体没有下划线 --> text-decoration: none; padding: 0 4px; } table.responsive .number,table.responsive .actions{ text-align: center; }
    <!-- 捕捉浏览器宽度最大为480px时触发以下css样式 --> @media (max-width: 480px)
    {
      <!-- 清除其它宽度下所设置的表格样式 --> table.responsive{ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; }
      <!-- 隐藏表头(这里的隐藏与visiblity隐藏不同,这里的隐藏将不会为隐藏部分留下空白位置,而visiblity会为隐藏部分留下空白位置) --> table.responsive thead{ display: none; }
      <!-- 将所有表格变成块级元素,以使表格独行显示 --> table.responsive td{ display: block; border: none; }
      <!-- 设置第一例左对齐并添加颜色 --> table.responsive .number{ text-align: left; background: #35B558; }
      <!-- 在第一例文字前面添加文字 --> table.responsive .number:before{ content: '课程序号';
         <!-- 在此处设置padding是避免设置number为相对路径 --> padding-right: 20px; font-weight: bold; } table.responsive .name:before{ content: '课程名称'; padding-right: 20px; font-weight: bold; }
       <!-- 设置相对路径,以便子元素使用绝对路径 --> table.responsive tr{ position: relative; }
      <!-- 通过绝对路径设置修改删除在第一行:
          因number的position值为static,所以number会在tr容器的第一行,
          这里修改删除通过绝对路径,设置距tr容器上面0px,则修改删除也会出现在tr容器第一行,这里一定要设置tr位置为相对路径 --> table.responsive .actions{ position: absolute; right: 0; top: 0; } }

     注意:由以上代码可以知道,使用position:absolute必须在其父元素中设置position:relative

     

    posted @ 2018-01-20 11:16 小白知浅 阅读(...) 评论(...) 编辑 收藏
    展开全文
  • bootstrap响应式表格

    2019-09-21 20:25:36
    bootstrap是一款前端样式开发的工具包,非常方便实用,可以使做出来的页面布局更加高端美观上档次,这次的例子是用到bootstrap的响应式表格,可以非常方便的使你的表格提升一个档次,由丑小鸭变成美丽的白天鹅!...

    bootstrap是一款前端样式开发的工具包,非常方便实用,可以使做出来的页面布局更加高端美观上档次,这次的例子是用到bootstrap的响应式表格,可以非常方便的使你的表格提升一个档次,由丑小鸭变成美丽的白天鹅!适用于手机、平板、台式机各种客户端。

    首先我们用到的表是骑车表car:

     

    然后我们要引入几个文件,分别是bootstrap的css文件和js文件以及jquery包:

    <link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="jquery-3.2.0.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>

    然后就是主页面代码,除了引入表格样式和模态框,其他和以前的php方式一样:

    <body>
    <h1>汽车信息</h1>
    <table class="table table-striped">
      <thead>
        <tr>
          <td>代号</td>
          <td>名称</td>
          <td class="hidden-xs">系列</td><!--在手机上隐藏,在电脑是显示-->
          <td class="hidden-xs">上市时间</td>
          <td class="hidden-xs">油耗</td>
          <td class="hidden-xs">功率</td>
          <td>价格</td>
          <th class="visible-xs-block">操作</th><!--在手机显示,在电脑隐藏-->
        </tr>
        </thead>
      <?php
        require "DBDA.class.php";
        $db = new DBDA();
        $sql = "select * from car";
        $arr = $db->query($sql);
        foreach($arr as $v)
        {
            echo "<tr>
          <td>{$v[0]}</td>
          <td>{$v[1]}</td>
          <td class='hidden-xs'>{$v[2]}</td>
          <td class='hidden-xs'>{$v[3]}</td>
          <td class='hidden-xs'>{$v[4]}</td>
          <td class='hidden-xs'>{$v[5]}</td>
          <td>{$v[7]}</td>
          <td class='visible-xs-block'>
          <button type='button' class='btn btn-primary btn-xs xq' code='{$v[0]}'>详情</button>
          </td>
        </tr>";/*引入bootstrap的按钮样式*/
        }
        
        ?>
    </table>
    
    
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">汽车详细信息</h4>
                </div>
                <div class="modal-body" id="neirong"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
    </body>
    <script>
    $(".xq").click(function(){
        //显示详细信息    
        //取代号
        var code = $(this).attr("code");
        $.ajax({
            url:"bootchuli.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                var lie = data.trim().split("^");
                var str = "<div>代号:"+lie[0]+"</div><div>名称:"+lie[1]+"</div><div>系列:"+lie[2]+"</div><div>上市时间:"+lie[3]+"</div><div>油耗:"+lie[4]+"</div><div>功率:"+lie[5]+"</div><div>价格:"+lie[7]+"</div>";
                $("#neirong").html(str);
                //触发模态框
                $('#myModal').modal('show');
            }
        });
    })
    </script>
    </html>

    处理页面:

    <?php
    $code = $_POST["code"];
    require "DBDA.class.php";
    $db = new DBDA();
    $sql = "select * from car where code='{$code}'";
    echo $db->strquery($sql);

    最终效果图:

    手机端:

     

    转载于:https://www.cnblogs.com/mengshenshenchu/p/6857984.html

    展开全文
  • 将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于... Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式,导致响应式表格出现问题。除非使用我们...

    将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

    Firefox 和 fieldset 元素

    Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式,导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码,否则无解:

    @-moz-document url-prefix() {
      fieldset { display: table-cell; }
    }
    <div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div>

    —–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
    —–乐于分享,共同进步!
    —–更多文章请看:http://blog.csdn.net/duruiqi_fx


    转载于:https://www.cnblogs.com/hainange/p/6153743.html

    展开全文
  • Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机 下面是手机端显示的样式 代码如下: 1.test.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-...
  • Bootstrap-响应式表格

    2017-05-15 17:00:00
    Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机 下面是手机端显示的样式 代码如下: 1.test.php <!DOCTYPE ...

    Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机

     

    下面是手机端显示的样式

           

    代码如下:

    1.test.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <script src="jquery-3.2.0.min.js"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
          <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
          <!--[if lt IE 9]>
             <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
             <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
          <![endif]-->
    </head>
    
    <body>
    <h1>汽车信息</h1>
    
    <table class="table table-striped">
      <thead>
        <tr>
          <th>代号</th>
          <th>名称</th>
          <th class="hidden-xs">系列</th>
          <th class="hidden-xs">上市时间</th>
          <th class="hidden-xs">油耗</th>
          <th class="hidden-xs">功率</th>
          <th>价格</th>
          <th class="visible-xs-block">详情</th>
        </tr>
      </thead>
      <tbody>
       <?php
        require "DBDA.class.php";
        $db = new DBDA();
        $sql = "select * from car";
        $arr = $db->query($sql,1);
        foreach($arr as $v)
        {
            echo "<tr>
          <td>{$v[0]}</td>
          <td>{$v[1]}</td>
          <td class='hidden-xs'>{$v[2]}</td>
          <td class='hidden-xs'>{$v[3]}</td>
          <td class='hidden-xs'>{$v[4]}</td>
          <td class='hidden-xs'>{$v[5]}</td>
          <td>{$v[7]}</td>
          <td class='visible-xs-block'>
          <button type='button' class='btn btn-primary btn-xs xq' code='{$v[0]}'>详情</button>
          </td>
        </tr>";
        }
        
        ?>
      </tbody>
    </table>
    
    
    
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">汽车详细信息</h4>
                </div>
                <div class="modal-body" id="neirong"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
    
    <script type="text/javascript">
    $(".xq").click(function(){
        //显示详细信息    
        //取代号
        var code = $(this).attr("code");
        //查询该汽车的所有信息
        $.ajax({
            url:"chuli.php",
            data:{code:code},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                var lie = data.trim().split("^");
                var str = "<div>代号:"+lie[0]+"</div><div>名称:"+lie[1]+"</div>
    <div>系列:"+lie[2]+"</div><div>上市时间:"+lie[3]+"</div><div>油耗:"+lie[4]+"</div><div>功率:"+lie[5]+"</div><div>价格:"+lie[7]+"</div>"; $("#neirong").html(str); //触发模态框 $('#myModal').modal('show'); } }); }) </script> </body> </html>

    2.chuli.php

    <?php
    $code = $_POST["code"];
    require "DBDA.class.php";
    $db = new DBDA();
    $sql = "select * from car where code='{$code}'";
    echo $db->strquery($sql);

     

    转载于:https://www.cnblogs.com/zhaohui123/p/6857210.html

    展开全文
  • DESTINY Grid(DT Grid)是一款由大连首闻科技有限公司,自主研发的基于MIT开源协议的响应式表格控件,拥有跨浏览器支持、程序思路清晰、功能强大、高效加载等众多优秀素质,或许是目前已知的最好的响应式表格控件。...
  • 使用工具,sublime text3,浏览器谷歌, 1.bootstrap有自己的样式,字体,背景色,字体大小 2.字体,span class = h1(-h6),即字体大小 3.响应式表格
  • 响应式表格,一开始我使用的是bootstrap中的css样式,但是后来发现在移动端的效果很烂,或者我处理的不太好吧(容易因为内容过长导致布局难看)。 偶然看到一篇文章,通过媒体查询来改变布局,先看效果图: ...
  • 在Bootstrap响应式表格在手机上显示时,屏幕窄,但不希望表格里的内容自动换行,比如姓名,可设置white-space: nowrap属性。 CSS样式: .cell_nowrap { white-space: nowrap; } HTML: <div class="table-...
  • 项目中做中国式表格会很常见,如果只是普通的表格,完全不用任何组件,结合Bootstrap的样式,使用VUE强大的数据绑定功能就可实现,比如下面这样: <table class="table table-bordered table-striped" v-loading=...
  • 响应式做的表格

    2019-05-28 15:40:51
    在平常的网页中,做一些普通表格时,没用用到响应式时,游览器的高度一发生变化的时候整个样式都乱了,这些表格不是从数据库中查数据的,而是直接打上去的,对于新入门的程序员,要做一个具有响应式的的普通表格,该...
  • 自适应Table表格样式代码是一款div css3响应式表格特效。
  • 自适应Table表格样式代码是一款div css3响应式表格特效。
  • 表格表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中...
  • 表格样式风格

    2018-11-21 10:33:00
    1、.table 基础表格 2、.table-stroped 斑马线表格 3、.table-border 带边框的表格 ...6、.table-responsive 响应式表格 (即当屏幕小于768px时,表格下方会出现滚轮效果) 转载于:https://www.cnblogs.co...
  • bootstrap表格样式

    2017-08-29 09:01:21
    1、table-striped:斑马线表格 2、table-bordered:带边框的表格 ...5、table-responsive:响应式表格(当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,
  • bootstrap 表格样式

    2016-10-13 09:09:36
    表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,...
  • Bootstrap将全局font-size设置为14px,行高为1.428(20px),段落行高设置为等于1/2(10px),颜色为#3331)固定的宽度.container类用于固定宽度并支持响应式布局的容器(水平居中)。2)百分比宽度.container-fluid用于1...
  • bootstrap-表格样式

    2018-12-21 09:09:21
    不同的样式风格提供了不同的类名,主要包括: .table:基础表格 .table-striped:斑马线表格 ... .table-responsive:响应式表格 tr,不同类名不同颜色 &lt;table class="table table-bor...
  • Bootstrap-1 表格样式

    2019-01-18 09:01:01
    Bootstrap表格样式分类 基础样式.table ...响应式表格 操作步骤 在桌面新建一个文件夹作为站点来存放页面,以“我的站点”为文件名。(文件名自己随意写) 使用DW软件新建站点,站点位置...
  • .container 固定宽度并且具有响应式。 .container-fluid 自由宽度(100%宽度)。 这2个class是直接在body标签下建立一个div标签,class等于这2个中的一个。 然后其他内容全部写在这个div标签中即可! 例如: <!...
  • 头部样式绑定的:header-cell-style,用header-cell-class-name类名的方式没弄出来,就在行内使用的vw一样能响应式 <div class="tableCenter"> <!-- 头部样式 --> <el-table :header-cell-style=...
  • bootstrap中六种表格样式

    万次阅读 2015-11-29 12:27:19
    表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,...
  • 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 354
精华内容 141
关键字:

响应式表格样式