jQuery示例–水平手风琴–表而不是无序列表–更新 [英] jQuery Examples – Horizontal Accordion - Table instead of Un-ordered Lists - UPDATED
问题描述
好吧，我可以为需要此功能的任何人使用它:)
[原始声明/问题] CSS: 表布局(较大的溢出): [原始声明/问题] 感谢所有帮助和想法来解决此问题:) 好吧，我正在完全重新编辑它，因为我深入研究了您的问题，发现空白是一个问题. 就像我之前说过的那样，请使用空白:预包装，而不是pre以避免失真.还有一个IE等效项. 首先，这是一个示例，演示重新调整td元素的大小并删除其他元素的样式.它是硬编码的，但是可以根据您的需要进行操作. http://ece.arizona.edu/~justinvh/test.html 这是html: 这是JavaScript: 因此，需要注意一些事项.我使用nth-child选择器通过遍历每个th并应用消耗环境的函数(以避免引用)来获取与th对应的td元素.显然，这可以通过多种方式来完成. 您可以在动画上使用'complete'回调应用此CSS，并以此方式实现. 我特意对选择器进行了完全限定，以便您了解选择器的工作原理.您可以在需要的任何方式中添加标识符/类. 让我知道这是否对您有用. Ok I got it working for anyone who needs this :) [Original Statement/Question] JavaScript: CSS: Table Layout (large overflowing): [Original Statement/Question] Thanks for all the help and ideas to solve this issue :) Okay, I am completely re-editing this, because I looked more into your problem and saw that the white-space was an issue. Like I said before, use white-space: pre-wrap not pre to avoid distortion. There is an IE equivalent as well. First, here is an example demonstrating re-sizing the td elements and removing the style for others. It is hard-coded, but can be manipulated to fit your needs. http://ece.arizona.edu/~justinvh/test.html Here is the html: Here is the JavaScript: So, some things to note. I use the nth-child selector to get the elements of the td that correspond to the th by looping over each th and applying a function that consumes the environment (to avoid references). This can obviously be done in multiple ways. You can apply this CSS using 'complete' callback on animate and do it that way. I purposely fully qualified the selectors so you can see how they should work. You can add identifiers/classes to whatever means is necessary. Let me know if this works for you. 这篇关于jQuery示例–水平手风琴–表而不是无序列表–更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
以下是我要执行的操作的示例(但不要单击鼠标悬停):<style type="text/css">
.tbl {
table-layout: fixed;
border-top: 5px solid #ccc;
border-collapse: collapse;
background: #fff;
width: 100%;
} .tbl td {
border: 1px solid #ccc;
padding: 2px 5px;
overflow: hidden;
white-space: nowrap;
text-align: center;
} .tbl th {
border-bottom: 1px solid #ccc;
padding: 2px 5px;
overflow: hidden;
white-space: nowrap;
background: #fff;
display: table-cell !important;
}
td.correct_text_spacing {
white-space: normal;
}
</style>
<table class="tbl">
<tr>
<th class="firstColumn">
Cell 1:Heading
</th>
<th>
Cell 2:Long Heading Data
</th>
<th>
Cell 3:Heading
</th>
<th>
Cell 4:Heading
</th>
<th>
Cell 5:Heading
</th>
<th>
Cell 6:Heading
</th>
<th>
Cell 7:Heading
</th>
<th>
Cell 8:Heading
</th>
<th>
Cell 9:Heading
</th>
<th>
Cell 10:Heading
</th>
<th>
Cell 11:Heading
</th>
<th>
Cell 12:Heading
</th>
<th>
Cell 13:Heading
</th>
<th>
Cell 14:Heading
</th>
<th>
Cell 15:Heading
</th>
<th>
Cell 16:Heading
</th>
<th>
Cell 17:Heading
</th>
<th>
Cell 18:Heading
</th>
</tr>
<tr>
<td>
Cell 1:Row 1
</td>
<td>
Cell 2:Row 1:Overflowing Data - This has a lot of extra data that will be hidden and displayed correctly.
Please add more data to test the functionality of the cell data
</td>
<td>
Cell 3:Row 1
</td>
<td>
Cell 4:Row 1
</td>
<td>
Cell 5:Row 1: "Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum."
</td>
<td>
Cell 6:Row 1
</td>
<td>
Cell 7:Row 1
</td>
<td>
Cell 8:Row 1
</td>
<td>
Cell 9:Row 1
</td>
<td>
Cell 10:Row 1
</td>
<td>
Cell 11:Row 1
</td>
<td>
Cell 12:Row 1
</td>
<td>
Cell 13:Row 1
</td>
<td>
Cell 14:Row 1
</td>
<td>
Cell 15:Row 1
</td>
<td>
Cell 16:Row 1
</td>
<td>
Cell 17:Row 1
</td>
<td>
Cell 18:Row 1
</td>
</tr>
<tr>
<td>
Cell 1:Row 2
</td>
<td>
Cell 2:Row 2:Overflowing Data
</td>
<td>
Cell 3:Row 2
</td>
<td>
Cell 4:Row 2
</td>
<td>
Cell 5:Row 2
</td>
<td>
Cell 6:Row 2
</td>
<td>
Cell 7:Row 2
</td>
<td>
Cell 8:Row 2
</td>
<td>
Cell 9:Row 2
</td>
<td>
Cell 10:Row 2
</td>
<td>
Cell 11:Row 2
</td>
<td>
Cell 12:Row 2
</td>
<td>
Cell 13:Row 2
</td>
<td>
Cell 14:Row 2
</td>
<td>
Cell 15:Row 2
</td>
<td>
Cell 16:Row 2
</td>
<td>
Cell 17:Row 2
</td>
<td>
Cell 18:Row 2: "Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum."
</td>
</tr>
</table>
在对代码/问题进行多次编辑/修改后，我还是可以使用它，但是仅在IE(6和7)中，它无法在Firefox(Augh！)中正常工作.我认为这是同时而不是同时调用动画调用，尝试了回调选项，但也无法使它正常工作.任何帮助将是巨大的:)
另一个问题是我可能会忍受的:动画发生空白时:CSS的正常模式也起作用，导致动画使屏幕真正变长(高度)，然后在列单元格变大时对其进行校正.无论如何，在动画之后调用CSS，甚至可以设置动画?
顺便说一句:这是一个工作示例
我要在这里实现的是在一个页面上显示一个表，而没有水平滚动条或滚动，并允许该表显示选定的数据，并隐藏其他列，以便在单击后显示.
极端示例:如果我有一个包含30列的表格，我希望它显示而无需用户以任何水平方式滚动或移动页面，而是单击列数据以显示所选内容.
<!DOCTYPE HTML>
<html>
<head>
<title>Testing Horizontal Accordion</title>
<style>
table {
width: 100%;
}
th {
display: table-cell !important;
}
td {
border: 1px solid #A8A8A8;
}
div.content {
max-height: 20px;
overflow: hidden;
white-space: pre-wrap;
}
</style>
<script src="jquery-1.3.2.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th style="width: 70%;">A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
</div>
</td>
<td>
<div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
</div>
</td>
</tr>
<tr>
<td>
<div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
</div>
</td>
<td>Hello, my baby!</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
var $active = $("thead > tr > th:first");
var $active_td = $('div.content', 'table > tbody > tr > td:nth-child(1)');
var min_width = $active.next().width();
var max_width = $active.width();
$("thead > tr > th").each(function(i, e) {
(function(ith, element) {
$(element).click(function() {
$active_td.css('max-height', '20px');
$active.animate({ width: min_width }, { queue: false, duration: 400 });
$active_td = $('div.content', 'table > tbody > tr > td:nth-child(' + (ith + 1) + ')');
$active_td.css('max-height', 'inherit');
$(this).animate({ width: max_width }, { queue: false, duration: 400 });
$active = $(this);
});
})(i, e);
});
$('thead > tr > th:first').click();
</script>
Here is and example of what I'm trying to do (But on click not hover): The Example<script type="text/javascript">
$(document).ready(function(){
// Get original font size
var originalFontSize = $('html').css('font-size');
// Get active column
var activeColumn = $(".activeColumn");
// Set max width using percentage %
var maxWidth = 50;
// Get width % ratio for min width by getting the children (count) in the header
var table_header_children = $('tr:first-child').children().size();
// Divide the column header count by 100 to get the average width
var table_column_width_average = (100 / table_header_children);
// Get the outer height of the header
var table_header_height = $('th').outerHeight();
// Set min width for the columns
var minWidth = table_column_width_average;
// Animate table by clicking the table header ( <th> )
$("tr th").click(function(){
if ($(this).hasClass('correct_text_spacing')) {
// Check for double click, do nothing
var doubleClicked = true;
}
else {
// Animates the last active column
$(activeColumn).animate({
width: minWidth + "%"
}, {
queue: false,
duration: 600
});
// Animates the table header
$(this).animate({
width: maxWidth + "%"
}, {
queue: false,
duration: 600
});
activeColumn = this;
// Reset the table header CSS
$('tr:first-child').children().css({
'width': minWidth,
'overflow': 'hidden',
'white-space': 'nowrap',
'height': table_header_height
});
// Remove class if found
$('table.tbl tr').children().removeClass('correct_text_spacing');
// Reset the font size to zero
var index = $(this).parent().children().index(this);
$('table.tbl tr').each(function(){
$(':nth-child(' + (index + 1) + ')', this).css('font-size', '0px');
});
// Fix text spacing on selected column
var index = $(this).parent().children().index(this);
$('table.tbl tr').each(function(){
$(':nth-child(' + (index + 1) + ')', this).addClass('correct_text_spacing').animate({
fontSize: originalFontSize
}, {
queue: true,
duration: 950
});
});
}
});
});
</script>
<style type="text/css">
.tbl {
table-layout: fixed;
border-top: 5px solid #ccc;
border-collapse: collapse;
background: #fff;
width: 100%;
} .tbl td {
border: 1px solid #ccc;
padding: 2px 5px;
overflow: hidden;
white-space: nowrap;
text-align: center;
} .tbl th {
border-bottom: 1px solid #ccc;
padding: 2px 5px;
overflow: hidden;
white-space: nowrap;
background: #fff;
display: table-cell !important;
}
td.correct_text_spacing {
white-space: normal;
}
</style>
<table class="tbl">
<tr>
<th class="firstColumn">
Cell 1:Heading
</th>
<th>
Cell 2:Long Heading Data
</th>
<th>
Cell 3:Heading
</th>
<th>
Cell 4:Heading
</th>
<th>
Cell 5:Heading
</th>
<th>
Cell 6:Heading
</th>
<th>
Cell 7:Heading
</th>
<th>
Cell 8:Heading
</th>
<th>
Cell 9:Heading
</th>
<th>
Cell 10:Heading
</th>
<th>
Cell 11:Heading
</th>
<th>
Cell 12:Heading
</th>
<th>
Cell 13:Heading
</th>
<th>
Cell 14:Heading
</th>
<th>
Cell 15:Heading
</th>
<th>
Cell 16:Heading
</th>
<th>
Cell 17:Heading
</th>
<th>
Cell 18:Heading
</th>
</tr>
<tr>
<td>
Cell 1:Row 1
</td>
<td>
Cell 2:Row 1:Overflowing Data - This has a lot of extra data that will be hidden and displayed correctly.
Please add more data to test the functionality of the cell data
</td>
<td>
Cell 3:Row 1
</td>
<td>
Cell 4:Row 1
</td>
<td>
Cell 5:Row 1: "Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum."
</td>
<td>
Cell 6:Row 1
</td>
<td>
Cell 7:Row 1
</td>
<td>
Cell 8:Row 1
</td>
<td>
Cell 9:Row 1
</td>
<td>
Cell 10:Row 1
</td>
<td>
Cell 11:Row 1
</td>
<td>
Cell 12:Row 1
</td>
<td>
Cell 13:Row 1
</td>
<td>
Cell 14:Row 1
</td>
<td>
Cell 15:Row 1
</td>
<td>
Cell 16:Row 1
</td>
<td>
Cell 17:Row 1
</td>
<td>
Cell 18:Row 1
</td>
</tr>
<tr>
<td>
Cell 1:Row 2
</td>
<td>
Cell 2:Row 2:Overflowing Data
</td>
<td>
Cell 3:Row 2
</td>
<td>
Cell 4:Row 2
</td>
<td>
Cell 5:Row 2
</td>
<td>
Cell 6:Row 2
</td>
<td>
Cell 7:Row 2
</td>
<td>
Cell 8:Row 2
</td>
<td>
Cell 9:Row 2
</td>
<td>
Cell 10:Row 2
</td>
<td>
Cell 11:Row 2
</td>
<td>
Cell 12:Row 2
</td>
<td>
Cell 13:Row 2
</td>
<td>
Cell 14:Row 2
</td>
<td>
Cell 15:Row 2
</td>
<td>
Cell 16:Row 2
</td>
<td>
Cell 17:Row 2
</td>
<td>
Cell 18:Row 2: "Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum."
</td>
</tr>
</table>
After many edit/revises on the code/question I kinda have it working, but only in the IE's (6 & 7), it's not working correctly in Firefox (Augh!!). I think it's the animation calls being called at the same time and not concurrently, tried the callback option but can't get that to work either. any help would be great :)
Another issue but I might live with it: when the animation is happening the white-space:normal from the CSS is also working causing the animation to make the screen really long (Height) and then correct itself as the column cell gets larger. Anyway to call the CSS after the animation and maybe even animate that?
BTW: here is a WORKING DEMO
What I'm trying to achieve here is to display a table on one page without a horizontal scroll bar or scrolling and allowing the table to display the selected data and hide the other columns for later display if clicked.
EXTREME EXAMPLE: if I have a table with 30 columns I would like it to display without the need for the user to scroll or move the page in any horizontal manner but click on the column data to display the selected.<!DOCTYPE HTML>
<html>
<head>
<title>Testing Horizontal Accordion</title>
<style>
table {
width: 100%;
}
th {
display: table-cell !important;
}
td {
border: 1px solid #A8A8A8;
}
div.content {
max-height: 20px;
overflow: hidden;
white-space: pre-wrap;
}
</style>
<script src="jquery-1.3.2.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th style="width: 70%;">A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
</div>
</td>
<td>
<div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
</div>
</td>
</tr>
<tr>
<td>
<div class='content'>Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
</div>
</td>
<td>Hello, my baby!</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
var $active = $("thead > tr > th:first");
var $active_td = $('div.content', 'table > tbody > tr > td:nth-child(1)');
var min_width = $active.next().width();
var max_width = $active.width();
$("thead > tr > th").each(function(i, e) {
(function(ith, element) {
$(element).click(function() {
$active_td.css('max-height', '20px');
$active.animate({ width: min_width }, { queue: false, duration: 400 });
$active_td = $('div.content', 'table > tbody > tr > td:nth-child(' + (ith + 1) + ')');
$active_td.css('max-height', 'inherit');
$(this).animate({ width: max_width }, { queue: false, duration: 400 });
$active = $(this);
});
})(i, e);
});
$('thead > tr > th:first').click();
</script>
