Хорошо, я полностью отредактировал это, потому что я больше изучил вашу проблему и увидел, что пробел был проблемой.
Как я уже говорил, используйте пробел: предварительная упаковка не предварительно, чтобы избежать искажения. Также есть эквивалент IE.
Во-первых, вот пример, демонстрирующий изменение размера элементов td и удаление стиля для других. Он жестко запрограммирован, но им можно манипулировать в соответствии с вашими потребностями.
http://ece.arizona.edu/~justinvh/test.html
Вот HTML:
<!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>
Вот код JavaScript:
<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>
Итак, кое-что стоит отметить. Я использую селектор nth-child, чтобы получить элементы td, которые соответствуют th, зацикливая каждый th и применяя функцию, которая использует среду (чтобы избежать ссылок) Очевидно, что это можно сделать несколькими способами.
Вы можете применить этот CSS с помощью «полного» обратного вызова в animate и сделать это таким образом.
Я специально определил селекторы, чтобы вы могли видеть, как они должны работать. Вы можете добавлять идентификаторы / классы к любым необходимым средствам.
Дайте мне знать, если это работает для вас.