`

html之table之多个tbody

htmltabletbodymutiple多个 
阅读更多
效果图：






代码： 


<!DOCTYPE html>
<html>
<head>

   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>


table, td, th {
    border: 1px solid black; 
    border-top:none;  
}
th{
    border-top: 1px solid black; 
}


th,td{
   width: 100px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
table {
    border-collapse: collapse;
}

th {
    text-align: left;
}
.expand{
  display:block;
  border:1px solid black;
  position:relative;
  float:right;
  margin-right:-53px;
  background-color:#f2f2ff;
  width:50px;
  height:100%;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  cursor:pointer;
  color:#456;
}
.expand:hover{
  color:#888;
}

.tHide{
    display:none;
}

h2>i{
    color:brown;
}
</style>
</head>
<body>

<h2>The <i>tbody</i> Tag</h2>
<p>Use <b><i>multiple</i></b> tbody sections when rules are needed between groups of table rows:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
</table>


<table>
  <tbody>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td>$100
            <span class="expand">Detail</span>
        </td>
     </tr>
  </tbody>
  <tbody class="tHide">
      <tr>
        <td>1.0</td>
        <td>2.0</td>
        <td>3.0</td>        
      </tr>
      <tr>
        <td>2.0</td>
        <td>3.0</td>
        <td>4.0</td>        
      </tr>
  </tbody>
</table>


<table>
  <tbody>
      <tr>
        <td>Lois</td>
        <td>Griffin</td>
        <td>$150<span class="expand">Detail</span></td>
      </tr>
  </tbody>
  <tbody class="tHide">
      <tr>
        <td>1.0</td>
        <td>2.0</td>
        <td>3.0</td>        
      </tr>
      <tr>
        <td>2.0</td>
        <td>3.0</td>
        <td>4.0</td>        
      </tr>
  </tbody>
</table>


<table>
  <tbody>
      <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td>$300<span class="expand">Detail</span></td>
      </tr>
  </tbody>
  <tbody class="tHide">
      <tr>
        <td>1.0</td>
        <td>2.0</td>
        <td>3.0</td>        
      </tr>
      <tr>
        <td>2.0</td>
        <td>3.0</td>
        <td>4.0</td>        
      </tr>
  </tbody>
</table>


<table>
  <tbody>
      <tr>
        <td>Cleveland</td>
        <td>Brown</td>
        <td>$250<span class="expand">Detail</span></td>
      </tr>
  </tbody>
  <tbody class="tHide">
      <tr>
        <td>1.0</td>
        <td>2.0</td>
        <td>3.0</td>        
      </tr>
      <tr>
        <td>2.0</td>
        <td>3.0</td>
        <td>4.0</td>        
      </tr>
  </tbody>
</table>

    <script>

     $(function(){

           $("tbody span.expand").click(function(){
           
                var tbody = 
                $(this)
                    .parent()  // td
                    .parent()  // tr
                    .parent()  // tbody
                    .siblings('tbody');
                    
                tbody
                    //.slideToggle("slow");
                    //.toggleClass("tHide");
                    .fadeToggle("fast","swing");
           });

     });


    </script>

</body>
</html>




代码二： 



<!DOCTYPE html>
<html>
<head>

   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>


table, td, th {
    border: 1px solid black; 
    border-top:none;  
}
th{
    border-top: 1px solid black; 
}


th,td{
   width: 100px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
table {
    border-collapse: collapse;
}

th {
    text-align: left;
}
.expand{
  display:block;
  border:1px solid black;
  position:relative;
  float:right;
  margin-right:-53px;
  background-color:#f2f2ff;
  width:50px;
  height:100%;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  cursor:pointer;
  color:#456;
}
.expand:hover{
  color:#888;
}

.tHide{
    display:none;
}

h2>i{
    color:brown;
}
</style>
</head>
<body>

<h2>The <i>tbody</i> Tag</h2>
<p>Use <b><i>multiple</i></b> tbody sections when rules are needed between groups of table rows:</p>

<table>
          <thead>
               <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
              </tr>      
          </thead>
          
          
          <!-- 1. tbody   -->
          <tbody>
            <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100
                    <span class="expand">Detail</span>
                </td>
             </tr>
          </tbody>
          <tbody class="tHide">
              <tr>
                <td>1.0</td>
                <td>2.0</td>
                <td>3.0</td>        
              </tr>
              <tr>
                <td>2.0</td>
                <td>3.0</td>
                <td>4.0</td>        
              </tr>
          </tbody>
  
  
          <!-- 2. tbody   -->
          <tbody>
              <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150<span class="expand">Detail</span></td>
              </tr>
          </tbody>
          <tbody class="tHide">
              <tr>
                <td>1.0</td>
                <td>2.0</td>
                <td>3.0</td>        
              </tr>
              <tr>
                <td>2.0</td>
                <td>3.0</td>
                <td>4.0</td>        
              </tr>
          </tbody>
  
           <!-- 3. tbody   -->
           <tbody>
              <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300<span class="expand">Detail</span></td>
              </tr>
          </tbody>
          <tbody class="tHide">
              <tr>
                <td>1.0</td>
                <td>2.0</td>
                <td>3.0</td>        
              </tr>
              <tr>
                <td>2.0</td>
                <td>3.0</td>
                <td>4.0</td>        
              </tr>
          </tbody>
  
  
         <!-- 4. tbody   -->
          <tbody>
              <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250<span class="expand">Detail</span></td>
              </tr>
          </tbody>
          <tbody class="tHide">
              <tr>
                <td>1.0</td>
                <td>2.0</td>
                <td>3.0</td>        
              </tr>
              <tr>
                <td>2.0</td>
                <td>3.0</td>
                <td>4.0</td>        
              </tr>
          </tbody>
 
</table>


    <script>

     $(function(){

           $("tbody span.expand").click(function(){
           
                var tbody = 
                $(this)
                    .parent()  // td
                    .parent()  // tr
                    .parent()  // tbody
                    .next();
                    
                tbody
                    //.slideToggle("slow");
                    //.toggleClass("tHide");
                    .fadeToggle("fast","swing");
           });

     });


    </script>

</body>
</html>




引用：

http://stackoverflow.com/a/3076721/2893073

http://www.w3.org/TR/xhtml1/dtds.html



--


  • 大小: 26 KB
分享到：
| java程序员书籍推荐
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    bootstrap表格固定表头并且tbody部分添加滚动条

    一个基本的Bootstrap表格由`&lt;table&gt;`标签开启，包含`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`等部分。`&lt;thead&gt;`用于定义表格的表头，`&lt;tbody&gt;`则包含表格的主要内容，`&lt;tfoot&gt;`则常用来显示总计或统计信息。 要实现表头固定...

    HTML用table写的一个网页，纯table源码

    在这个"HTML用table写的一个学校首页"示例中，我们可以学习到如何利用HTML的`&lt;table&gt;`标签来构建一个简单的网页布局，这对于初学者或者刚接触网页设计的人来说是非常有价值的。尽管现代网页设计倾向于使用更灵活的...

    html中table固定头部表格tbody可上下左右滑动

    当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： &lt;div class=table_box_big&gt; &lt;div class=table_box&gt; &lt;table&gt; &lt;th&gt;&lt;div&gt;标题一&lt;/div&gt;&lt;/th&gt; &lt;th&gt;&lt;div&gt;...

    HTML固定Table标题行的四种方法

    创建一个包含thead和tbody的容器，使用`display: flex`或`display: grid`，然后对thead应用相应的固定样式。 ```css .table-container { display: flex; overflow-y: auto; } .table-container thead { ...

    HTML Table固定表头完美实现

    然而，当表格内容较多，需要滚动查看时，表头（Header）往往随着滚动消失，给用户阅读带来不便。本篇文章将探讨如何通过HTML、CSS以及JavaScript技术，实现HTML表格的固定表头效果，使得在滚动时表头始终保持可见。 ...

    html中table的表格样式

    首先，一个基本的表格由多个部分组成，如`&lt;table&gt;`, `&lt;tr&gt;`, `&lt;th&gt;`, `&lt;td&gt;`等。`&lt;table&gt;`定义了整个表格，`&lt;tr&gt;`表示表格行，`&lt;th&gt;`是表头单元格，而`&lt;td&gt;`则是数据单元格。例如： ```html &lt;table&gt; 姓名 年龄 ...

    基于Bootstrap table组件实现多层表头的实例代码

    多层表头是指在表格中实现多个层次的表头，每个层次可以包含多个列。这种结构常用于展示复杂的数据关系，例如树形结构的数据。Bootstrap Table提供了一个简单的方式来实现多层表头，只需要使用合适的HTML结构和CSS...

    html table 固定表头和列

    "html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头（thead）和第一列（或列组）始终保持可见。 一、HTML表格基础 在HTML中，`&lt;table&gt;`元素用于创建表格，`&lt;tr&gt;`定义表格行，`&lt;th&gt;`定义表头...

    html 表单排序

    一个基本的HTML表格由`&lt;table&gt;`元素、`&lt;tr&gt;`（表格行）元素、`&lt;th&gt;`（表头单元格）元素和`&lt;td&gt;`（数据单元格）元素组成。例如： ```html &lt;table&gt; 姓名 年龄 城市 &lt;tbody&gt; 张三 &lt;td&gt;25 北京 &lt;!-...

    jQuery插件冻结行列、固定列固定行，html、table实现

    对于复合表头，插件能够正确处理多个级别的表头，确保冻结效果的完整性。 其次，插件的一大优点是对原业务代码的侵入较小。这意味着您可以在现有的表格结构基础上轻松添加此插件，而无需大规模修改HTML或JavaScript...

    html－把XML文件加载到table

    XML文件，如`cd_catalog.xml`，通常包含一个或多个元素，每个元素都有可能的属性和子元素。例如，一个CD目录可能有`&lt;cd&gt;`元素，每个`&lt;cd&gt;`代表一张专辑，包含`&lt;title&gt;`、`&lt;artist&gt;`等子元素来表示专辑名和艺术家信息...

    FixedTable.7z

    table固定左侧多列，画面中可对多个table进行固定，谷歌、ie都试过没问题；之前实在是网上找不到好的，就自己整合弄了一个，质量没的说，肯定胜过90%其他的；调用简单： 例子是：html+jquery+FixedTable.js $("#...

    table嵌套table边框样式

    一个HTML表格由`&lt;table&gt;`元素开启，包含`&lt;tr&gt;`（行）元素，`&lt;td&gt;`（单元格）或`&lt;th&gt;`（表头单元格）元素，以及可能的`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`部分。当表格嵌套时，一个`&lt;td&gt;`或`&lt;th&gt;`元素内部可以包含另一个...

    table的表头固定

    它由多个子元素组成，包括`&lt;thead&gt;`（表头）、`&lt;tbody&gt;`（表体）和`&lt;tfoot&gt;`（表脚）。在处理表头固定的问题时，`&lt;thead&gt;`尤为重要，因为它包含表格的列名或标题。 为了实现表头固定，我们首先需要将`&lt;thead&gt;`和`...

    JavaScript 实现 Excel数据导出 支持多个Sheet页导出

    6. **支持多个Sheet页**：对于多Sheet页的导出，我们需要创建多个HTML表格，每个表格代表一个Sheet页。然后将这些表格放入一个大的HTML `&lt;table&gt;` 元素中，每个子表格用 `&lt;tbody&gt;` 包裹，并添加一个表头 `&lt;thead&gt;` ...

    js实现漂亮的table表格

    在网页开发中，表格（Table）是展示数据的重要方式之一，尤其在前端界面设计中，一个美观、功能齐全的表格可以提升用户体验。本教程将详细介绍如何利用JavaScript (JS) 和 Cascading Style Sheets (CSS) 技术来创建...

    bootstrap集成table样式的总结

    Bootstrap是世界上最受欢迎的前端开发框架之一，它提供了一套完整的响应式布局、移动设备优先的Web设计工具。在Bootstrap中，Table组件是一个重要的部分，它允许开发者轻松地创建美观、可定制的表格。本篇文章将深入...

    tableExport 前端数据导出工具

    1. **多格式支持**：TableExport支持导出为CSV、XLS（Excel）、XLSX、ODS、PDF、TXT、JSON、XML等多种格式，满足不同场景的需求。 2. **自定义样式**：你可以根据项目需求调整导出数据的样式，比如字体、颜色、边框...

    HTML的基础资料（table,form,frame,csst）

    它由多个子元素组成，如`&lt;tr&gt;`（行）、`&lt;td&gt;`（单元格）和`&lt;th&gt;`（表头）。表格可以通过`&lt;colgroup&gt;`和`&lt;col&gt;`来控制列的样式，通过`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`来定义表头、主体和页脚。`border`属性可以设置...

Magicbox
Global site tag (gtag.js) - Google Analytics