折りたたみテーブルCSS

1.html

<DIV CLASS = "カスタム倍-テーブル">
<テーブルCELLPADDING = "0" CELLSPACING = "0"幅= "100％"クラス= "省略記号-THEADカスタムテーブルの最後の列-センターテーブルボーダー">
< THEAD>
<TR>
<TH幅= "12％">编号</番目>
<TH幅= "18％"クラス= "TAL">名称</番目>
<TH幅= "12％"クラス= "TAL ">总造价（元）</番目>
<TH幅=" 12％」クラス= "TAL">占工程费用比例</番目>
<TH幅= "12％"クラス= "TAL">单方造价（元/ M2）</番目>
<TH幅= "9％">指标标杆</番目>
</ TR>
</ THEAD>
</ TABLE>
<DIV CLASS = "ツリーテーブル">
<DIV CLASS = "TR-レベル1">
<テーブルクラス= "カスタム・テーブル省略記号テーブルの最後の列、センターテーブルボーダー">
<TBODY>
<TR>
<TD幅= "12％"クラス=」倍クリック"> <DIV CLASS ="矢印アイコンを"> </ divの> 001 </ TD>
<TD幅= "18％">分部分项合计</ TD>
<TD幅= "12％"> 154323000 </ TD>
<TD幅= "12％"> 20％</ TD>
<TD幅= "12％"> <Pクラス= "赤"> 154561 </ P> </ TD>
<TD幅= "9％"> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
<DIVクラス= "レベル2">
<DIV CLASS = "TR-レベル-2">
<テーブルクラス= "カスタム・テーブルの省略記号表の最後の列-センターテーブルボーダー">
<TBODY>
<TR>
<TD幅= "12％"クラス= "倍クリックし、フォント、ボールド"> <DIV CLASS = "矢印アイコンを"> </ divの> 0011 </ TD>
<TD WIDTH =」18％」クラス= "フォントボールド">土建工程</ TD>
<TD幅= "12％"> 154323000 </ TD>
<TD幅= "12％"> 20％</ TD>
<TD幅= "12％"> <スパンクラス= "赤"> 154561 </スパン> </ TD>
<TD幅= "9％"> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
の<divクラス= "レベル3">
<DIV CLASS = "TR-レベル-3">
<テーブルクラス= "カスタム・テーブルの省略記号表の最後の列-センターテーブルボーダー" >
<TBODY>
<TR>
<TD WIDTH = "12％"クラス= "折りたたみクリック"> <DIV CLASS = "矢印アイコンを"> </ div> 00111 </ TD>
<TD WIDTH = "18％" >分部分项合计</ TD>
<TD幅= "12％"> 154323000 </ TD>
<TD幅= "12％"> 20％</ TD>
<TD幅= "12％"> 154561 </ TD>
<TD幅= "9％"> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
<DIV CLASS = "レベル4">
<DIV CLASS = "TR-レベル-4">
<テーブルクラス= "カスタム・テーブルの省略記号表の最後の列-センターテーブルボーダー">
<TBODY>
<TR>
<TD WIDTH = "12％"クラス= "折りたたみクリック"> <DIV CLASS = "矢印アイコン"> </ div> 001111 </ TD>
<TD WIDTH = "18％">分部分项合计</ TD>
<TD幅= "12％"> 154323000 </ TD>
<TD幅= "12％"> 20％</ TD>
<TD幅= "12％"> 154561 </ TD>
<TD幅=」 9％ "> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
<DIV CLASS ="レベル5 ">
<DIV CLASS =" TR-レベル5 ">
<テーブルクラス="特注テーブル省略記号表の最後の列-センターテーブルボーダー」>

<TBODY>
<TR>
<TD幅= "12％"> 001111 </ TD>
<TD幅= "18％">分部分项合计</ TD>
<TD幅= "12％"> 154323000 </ TD >
<TD幅= "12％"> 20％</ TD>
<TD幅= "12％"> 154561 </ TD>
<TD幅= "9％"> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
</ div>
</ div>
</ div>
</ div>
</ div>
<divのクラス= "TR-レベル-3">
<テーブルクラス= "カスタム・テーブルの省略記号、テーブルの最後-columnセンターテーブルボーダー">
<TBODY>
<TR>
<TD幅=" 12％」クラス= "折りたたみクリック"> <DIV CLASS = "矢印アイコンを"> </ div> 00111 </ TD>
<TD WIDTH = "18％">分部分项合计</ TD>
<TD WIDTH = "12 ％ "> 154323000 </ TD>
<TD幅=" 12％ "> 20％</ TD>
<TD幅= "12％"> 154561 </ TD>
<TD幅= "9％"> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
<DIV CLASS = "レベル4">
<DIV CLASS = "TR-レベル4">
<テーブルクラス= "カスタム・テーブル省略記号テーブルの最後の列、センターテーブルボーダー">
<TBODY>
<TR>
<TD幅= "12％"クラス=」クリック倍"> <DIV CLASS ="矢印アイコンを"> </ div> 001111 </ TD>
<TD WIDTH =" 18％ ">分部分项合计</ TD>
<TD WIDTH =" 12％ "> 154323000 </ TD>
<TD幅= "12％"> 20％</ TD>
<TD幅= "12％"> 154561 </ TD>
<TD幅= "9％"> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
<DIV CLASS = "レベル5">
<DIV CLASS = "TR-レベル5">
<テーブルクラス=「カスタム・テーブルの省略記号表の最後の列-センターテーブルボーダー」>

<TBODY>
<TR>
<TD幅= "12％"> 001111 </ TD>
<TD幅= "18％">分部分项合计</ TD>
<TD幅= "12％"> 154323000 </ TD >
<TD幅= "12％"> 20％</ TD>
<TD幅= "12％"> 154561 </ TD>
<TD幅= "9％"> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
</ div>
</ div>
</ div>
</ div>
</ div>
</ div>
</ div>
<DIV CLASS = "TR-レベル2">
<テーブルクラス= 「カスタム・テーブルの省略記号表の最後の列-センターテーブルボーダー」>
<TBODY>
<TR>
<TD WIDTH = "12％"クラス= "倍クリックフォントボールド"> <DIV CLASS = "矢印アイコン"> </ divの> 0011 </ TD>
<TD WIDTH = "18％"クラス= "フォントボールド">土建工程</ TD>
<TD幅= "12％"> 154323000 </ TD>
<TD幅= "12％"> 20％</ TD>
<TD幅= "12％"> <スパンクラス= "赤"> 154561 </スパン> </ TD>
<TD幅= "9％"> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
<DIV CLASS = "レベル3">
<DIV CLASS = "TR-レベル3">
<テーブルクラス= "カスタム・テーブルの省略記号テーブル最後列中央テーブルボーダー">
<TBODY>
<TR>
<TD WIDTH =" 12％」クラス= ""> <DIV CLASS = "矢印アイコンを"> </ div> 00111 </ TD倍クリック>
<TD幅= "18％">分部分项合计</ TD>
<TD幅= "12％"> 154323000 </ TD>
<TD幅=」12％ "> 20％</ TD>
<TD幅=" 12％ "> 154561 </ TD>
<TD幅=" 9％ "> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
<DIV CLASS = "レベル4">
<DIV CLASS = "TR-レベル4">
<テーブルクラス= "カスタム・テーブル省略記号表の最後の列-センターテーブルボーダー">
<TBODY>
<TR>
<TD WIDTH = "12％"クラス= "折りたたみクリック"> <DIV CLASS = "arrow-アイコン"> </ div> 001111 </ TD>
<TD幅=" 18％ ">分部分项合计</ TD>
<TD幅=" 12％ "> 154323000 </ TD>
<TD幅=" 12％ "> 20％</ TD>
<TD幅=" 12％ "> 154561 </ TD>
<TD幅=" 9％ "> 154323000 </ TD>
</ TR>
</ TBODY>
</ TABLE>
<DIVクラス= "レベル5">
<DIV CLASS = "TR-レベル5">
<テーブルクラス=」カスタム・テーブルの省略記号表の最後の列-センターテーブルボーダー」>

</ div>
</ div>の
2.css

/ *折叠表格* /
.custom倍テーブル.customテーブル{幅：100％;ボーダー崩壊：崩壊;}
.custom倍テーブル.custom-TABLE> THEAD> TR {背景色：＃fffbf8 ;}
.custom倍テーブル.customテーブル> THEAD> TR>番目{位置：相対;高さ：44px;フォントサイズ：14px;テキスト整列：左;パディング：0 10pxの;}
.custom-fold-表.customテーブル> THEAD> TR>目：最初の子{ボーダー左：0;}
.custom倍テーブル.custom-table.first列センター> THEAD> TR>目：最初の子、
.custom倍テーブル.custom-table.first列センター> TBODY> TR> TD：最初の子{テキスト整列：センター;}
.custom倍テーブル.custom-table.last列センター> THEAD> TR>目：最後の子、.custom倍テーブル.custom-table.last列センター> TBODY> TR> TD：最後の子{テキスト整列：センター;}
.custom倍テーブル.customテーブル> TBODY> TR：ホバー{背景色：＃FEF3F3;}
.custom倍テーブル.customテーブル> TBODY> TR> TD {位置：相対;テキスト整列：左;パディング：0 10pxの;色：＃354052; ボーダー底：1ピクセル固体＃1 e5e5e5;高さ：40ピクセル;}
.ellipsis-THEAD {テーブルレイアウト：固定;}
.ellipsis-THEAD番目{幅：100％;}
/ *表格有边框* /
.custom-fold- {パディング番目テーブル.tableボーダー：0 3px。国境：1pxの固体＃1 e5e5e5。ボーダー右：なし;}
.custom倍テーブル.tableボーダー> THEAD> TR>目：最初の子{ボーダー左：1ピクセル固体＃1 e5e5e5 ;;}
.custom倍テーブル.tableボーダーのTD {ボーダー左：1ピクセル固体＃1 e5e5e5;}
.custom倍テーブル.tableボーダー{ボーダー右：1ピクセル固体＃1 e5e5e5。}
.treeテーブル.trレベル-2：最後の型DIV：最後のタイプ： '';ボーダー底：{コンテンツの前に0;}
/ *树形表格组件* /
/*.tree-tableテーブル> TBODY> TR：ホバー{背景色：透明;} * /
.treeテーブル.trレベル-1 {位置：相対; / *バックグラウンド色：#FFF; * /}
.treeテーブル.trレベル-2 {位置：相対;表示：なし; / *背景色：＃1 f4f8fb; * /}
.treeテーブル.trレベル-2テーブル> TBODY> TR> TD：最初の子{テキストインデント：35px;位置：相対;}
.treeテーブル.trレベル-2：コンテンツ{前： '';位置：絶対;左：0;トップ： 0;底：0;幅は50px;ボーダートップ：1ピクセル固体＃1 f2f2f2;ボーダー底：1ピクセル固体＃1 f2f2f2;}
.treeテーブル.trレベル-3 {位置：相対;表示：なし; / *背景色：＃E9EFF5; * /}
.treeテーブル.trレベル-3テーブル> TBODY> TR> TD：最初の子{テキストインデント：58px;}
.treeテーブル.tr・レベル3：{コンテンツの前に： '';位置：絶対;左：0;上部：-1px;底：0;幅：70ピクセル;ボーダートップ：2ピクセル固体＃1 f2f2f2; BORDER-底：2ピクセル固体＃1 f2f2f2;}
.treeテーブル.trレベル-4、.treeテーブル.trレベル-5 {位置：相対;表示：なし; / *背景色：＃e3eaf0; * /}
.treeテーブル.trレベル-4テーブル> TBODY> TR> TD：最初の子{テキストインデント：80px;}
.treeテーブル.trレベル-5テーブル> TBODY> TR> TD：最初の子{テキストインデント：104px;}
.treeテーブル.trレベル-4：{コンテンツの前に： '';位置：絶対;左：0;上部：-1px;底：0;幅：90PX;ボーダートップ：2ピクセル固体＃1 f2f2f2;ボーダー底：2ピクセル固体＃1 f2f2f2;}
.treeテーブル.trレベル-5：{コンテンツの前に： '';位置：絶対;左：0;上部：-1px;底：0 ;幅：110px;ボーダートップ：2ピクセル固体＃1 f2f2f2;ボーダー底：2ピクセル固体＃1 f2f2f2。}
/ *ツリー左テーブルに組立ライン* /
.trレベル-2-テーブル.tree：コンテンツ{後： '';位置：絶対;左：21px;トップ：0;高さ：100％; / *底：0; * /ボーダー左：1ピクセル固体＃ CAD6E1;}
.treeテーブル.trレベル-1 .trレベル-2：最後の子：{上部後：0;高さ：21px;}
.treeテーブル.trレベル1、レベル.tr- 2.last子：後{上部：0;高さ：21px;}
.treeテーブル.trレベル-3：{コンテンツ後： '';位置：絶対;左：41px;トップ：0;高さ：100 ％;ボーダー左：1ピクセル固体＃1 CAD6E1;}
.treeテーブル.trレベル-2 .trレベル-3：最後の子：{上部後：0;高さ：21px;}
.treeテーブル.trレベルの-2 .trレベル-3.last子：{上部：0;高さ：21px;}後
.treeテーブル.trレベル-4：後、.treeテーブル.trレベル-5： {： '';位置：コンテンツ絶対;左：61px;トップ：0;高さ：100％;ボーダー左：1ピクセル固体＃CAD6E1;}後
.treeテーブル.trレベル-5：左{後：80px ;}
.treeテーブル.trレベル-3 .trレベル-4：最後の子：{上部：0;高さ：21px;}後
.treeテーブル.trレベル-4- .trレベル-5：最後-child：{上部：0;高さ：21px;}後
.treeテーブル.trレベル-3 .trレベル-4.last子：後{上部：0;高さ：21px;}
.treeテーブル.trレベル-4- .trレベル-5.last子：{上部：0;高さ：21px;}後
.treeテーブル.trレベル-2 TR> TD：最初の子{背景：URL（ ../img/common/treetable-line.png）無反復21px -55px;}
.treeテーブル.trレベル-2 TR> td.active：最初の子{背景位置：21px -5px;}
.treeテーブル.trレベル-3 TR> TD：最初の子{背景位置：41px -55px;}
.treeテーブル.trレベル-3 TR> td.active：最初の子{背景位：41px -5px;}
.treeテーブル.trレベル-4 TR> TD：最初の子{背景位置：60PX -55px;}
.treeテーブル.trレベル-5 TR> TD：最初の子{背景位置：80px -55px;}
.treeテーブル.trレベル-4 TR> td.active：最初の子{背景位：60PX -5px;}
.treeテーブル.trレベル-5 TR> td.active：最初の子{背景位置：80px -5px;}
.treeテーブル.foldクリック{カーソル：ポインタ;}
。ツリーテーブル.foldクリック> .arrowアイコン{表示：インラインブロック;垂直整列：中央;幅：23px;高さ：20ピクセル、背景：URL（../ IMG /コモン/スプライトup.png）無反復は0 -1px;カーソル：ポインタ;}
.treeテーブル.fold-click.active> .arrowアイコン{背景位置：-22px 0;}
3.js

//ナンバー折りたたみテーブルアセンブリの
$（ドキュメント）.on（ 'クリック'、 '表.foldクリックツリー'、機能（E）{
IF（$（この）.hasClass（ 'アクティブ'））{
$（。この）.toggleClass（ 'アクティブ'）最も近い（ '表'）nextAll（）子供（）slideUp（）; ...
}
他{
$（この）.toggleClass（ 'アクティブ'）最も近い（ '表'）。。.nextAll（）子供（）slideDown（）;.
}
}）;
//最後の子クラス階層のそれぞれの最後の行に追加し、左ライン互換IE8
$（「ツリー・テーブル.tr-レベル-1。 .trレベル-2：直前に入って子供、.treeテーブル.trレベル-2 .trレベル-3：最後の子、.treeテーブル.trレベル-3 .trレベル-4：最後-child、.treeテーブル.trレベル -4 .trレベル-5：最後の子「）addClass（ '最後の子'）;.
図面。

----------------
免責事項：この記事はCSDNブロガー「低いトーンで_ _兄の元の記事、CC 4.0 BY-SAの著作権契約書に従ってください、複製、オリジナルのソースを添付してくださいリンクとこの文。
オリジナルリンクします。https：//blog.csdn.net/caiyongshengcsdn/article/details/79308555

おすすめ