Bootstrap使用父子表:

 

css(可忽略):

table, td, th {
margin: 0;
padding: 0;
vertical-align: middle;
text-align: left;
font-size: 12px;
border-color: #f2ecec !important;
}

#table thead th {//父表表頭
font-size: 14px;
font-weight: bold;
line-height: 19px;
padding: 0 8px 2px;
text-align: center;
background: #375A7F !important;
color: white;
}
 #child_table thead th {//子表表頭
      font-size: 14px;
      font-weight: bold;
      line-height: 19px;
      padding: 0 8px 2px;
      text-align: center;
      background: #375A7F !important;
      color: white;
    }

　　

　　

html:

white-space:nowrap;所有文本顯示在這一行
text-overflow:ellipsis;多餘文本省略號顯示
<div id="page-content-wrapper">

　　<table id="tableList"  style="white-space:nowrap;text-overflow:ellipsis"></table>

</div>

　　

JS:$('#table').bootstrapTable({

　　data: [],//Data
　　striped: true, //是否显示行间隔色
　　cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
　　sortable: true, //是否启用排序
　　sortOrder: "asc", //排序方式
　　pagination: true, //是否显示分页（*）
　　sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
　　pageNumber: 1, //初始化加载第一页，默认第一页
　　pageSize: 10, //每页的记录行数（*）
　　pageList: [10, 20, 50], //可供选择的每页的行数（*）
　　showColumns: true, //是否显示 内容列下拉框
　　showRefresh: true, //是否显示刷新按钮
　　minimumCountColumns: 2, //最少允许的列数
　　clickToSelect: true, //是否启用点击选中行
　　singleSelect: true, //单选checkbox
　　showToggle: false, //是否显示详细视图和列表视图的切换按钮
　　cardView: false, //是否显示详细视图
　　detailView: true, //是否显示父子表
　　search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，
　　strictSearch: false, //设置为 true启用 全匹配搜索，否则为模糊搜索
　　searchOnEnterKey: true, //回车搜索
　　searchTimeOut: 500, //设置搜索超时时间
　　trimOnSearch: true, //设置为 true 将允许空字符搜索
　　searchAlign: "right", //查询框对齐方式
　　toolbar: "#tableToolbar", //指定工具栏
　　showExport: true, //是否显示导出按钮
　　Icons: 'glyphicon-export',//這一行是幹嘛來著
　　exportOptions: {
　　ignoreColumn: [0], //忽略某一列的索引
　　fileName: 'name list', //文件名称设置
　　worksheetName: 'sheet1', //表格工作区名称
　　},
　　locale: tableLocale,
　　columns: [
　　　　{
　　　　　　checkbox: true
　　　　}, {
　　　　　　field: 'ID',
　　　　　　title: '<label>ID</label>',
　　　　　　align: 'center',
　　　　　　valign: 'middle',
　　　　　　sortable: true, //是否排序
　　　　　　visible: false, //是否顯示
　　　　},{
          field: 'filed',
          title: '<label set-lan="html:">filed</label>',//不能加 rowspan: 1, JSON倒出錯誤
　　　　　　align: 'center',
　　　　　　valign: 'middle',
　　　　　　sortable: true, //是否排序
　　　　　　visible: false, //是否顯示
　　　　}],
     　onExpandRow: function (index, row, $detail) {　　　　 　　　　　
          ShowChildTable(row.ID, $detail);//子表顯示的是重新查詢到的數據.　　 
          //ShowChildTable(tableView, [row]);子表顯示的是父表數據的一部分.
　} });
//顯示子表(目前是顯示父表的部分內容,也可通過變更data傳入其他內容)
    //顯示子表
    function SearchChildTable(id, tableView) {
     
      if (data != "") {     
        var Data = {ID:id};
        var strData = JSON.stringify(Data);       
        $.ajax({
          type: "POST",
          async: true,        
          url: url,
          contentType: 'application/json;charset="utf-8" ',
          data: strData,
          success: function (e) {           
            if (e.Status == "0") {
              if (e.Data.length > 0) {
                ShowChildTable(tableView,e.Data);
              }
              else {                
                ShowChildTable(tableView, []);
              }
            }
          },
          statusCode: {
            403: function (response) {
              swal({
                title: "",
                text: e.Message,
                type: 'warning',
                timer: 2000,
                showConfirmButton: false
              });
            }
          }
        });
      }

      
    }
    function ShowChildTable(tableView, data) {
      var child_table = tableView.html('<table id="child_table" ></table>').find('table');
      $(child_table).bootstrapTable({
        data: data,
        striped: false,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true
        pagination: false,                   //是否显示分页（*）
        sortable: false,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "client",
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [5, 10, 50],        //可供选择的每页的行数（*）
        search: false,
        strictSearch: false,
        searchOnEnterKey: true,            //回车搜索
        showColumns: false,
        showRefresh: false,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        singleSelect: false,
        showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,
        dataType: "json",//期待返回数据类型
        buttonsAlign: "left",//按钮对齐方式
        toolbarAlign: "left",//工具栏对齐方式        
        columns: [
          {
            field: 'filed',
            title: '<label>name</label>',
            align: 'center',
            valign: 'middle',
          }
        ]
      });
    }

　　

子表有沒有其他顯示方法或者形式?