这是我的代码：
fixedTable = (el) ->
$body = $(el).find '.fixedTable-body'
$sidebar = $(el).find '.fixedTable-sidebar table'
$header = $(el).find '.fixedTable-header table'
$($body).scroll ->
$($sidebar).css('margin-top', -$($body).scrollTop())
$($header).css('margin-left', -$($body).scrollLeft())
demo = new fixedTable $('#demo')@cellHeight: 20px;
@cellWidth: 100px;
@cellPadding: 5px;
@cellsWide: 5;
@cellsHigh: 15;
.fixedTable {
.table {
background-color: white;
width: auto;
tr {
td, th {
min-width: @cellWidth;
width: @cellWidth;
min-height: @cellHeight;
height: @cellHeight;
padding: @cellPadding;
}
}
};
&-header {
width: (@cellWidth * @cellsWide) + (@cellPadding * 2);
height: @cellHeight + (@cellPadding * 2);
margin-left: @cellWidth + (@cellPadding * 2);
overflow: hidden;
border-bottom: 1px solid #CCC;
};
&-sidebar {
width: @cellWidth + (@cellPadding * 2);
height: @cellHeight * @cellsHigh + (@cellPadding * 2);
float: left;
overflow: hidden;
border-right: 1px solid #CCC;
};
&-body {
overflow: auto;
width: (@cellWidth * @cellsWide) + (@cellPadding * 2);
height: (@cellHeight * @cellsHigh) + (@cellPadding * 2);
float: left;
}
};.fixedTable#demo
header.fixedTable-header
table.table.table-bordered
thead
tr
th A
th B
th C
th D
th E
th F
th G
th H
th I
th J
th K
th L
aside.fixedTable-sidebar
table.table.table-bordered
tbody
tr
td 14567567465447567467
tr
td 2
tr
td 3
tr
td 4
tr
td 5
tr
td 6
tr
td 7
tr
td 8
tr
td 9
tr
td 10
tr
td 11
tr
td 12
tr
td 13
tr
td 14
tr
td 15
tr
td 16
tr
td 17
tr
td 18
tr
td 19
div.fixedTable-body
table.table.table-bordered
tbody
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
tr
td a
td b
td c
td d
td e
td f
td g
td h
td i
td j
td k
td l
html是这样的：
.fixedTable#demo
header.fixedTable-header
table.table.table-bordered
thead