Сообщение от Aetae
|
|
А почему не использовать обычный colspan и не извращаться со склеиванием ячеек?
|
Потому что эти ячейки входят в состав кнопок, но при этом являются отдельными столбцами таблицы (для динамических отступов).
В итоге, вот моя полная реализация, теперь работает во всех нужных мне браузерах без багов, может и лучше всё это можно было реализовать, но пока, мне нравится:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.table {
display: table;
width: 40%;
background: #afa;
float: left;
}
.table2 {
display: table;
width: 60%;
background: #faa;
float: left;
}
.table2>ul,
.table>ul {
display: table-row;
}
.table2>ul>li,
.table>ul>li {
display: table-cell;
white-space: nowrap;
cursor: pointer;
}
.table2>ul>.spacer,
.table>ul>.spacer {
width: 15%;
border-left: 1px solid red;
}
.table2>ul>.spacer2,
.table>ul>.spacer2 {
width: 15%;
}
.clS {
margin-left: -1px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#nav1>li').mouseover(function() {
if ($.browser.msie && $.browser.version < 9) return;
if ($(this).hasClass("spacer")) $(this).next("li").css("opacity", 0.7);
else if ($(this).hasClass("spacer2")) $(this).prev("li").css("opacity", 0.7);
else $(this).css("opacity", 0.7);
});
$('#nav1>li').mouseout(function(e) {
if ($.browser.msie && $.browser.version < 9) return;
if ($(this).hasClass("spacer")) $(this).next("li").css("opacity", 1);
else if ($(this).hasClass("spacer2")) $(this).prev("li").css("opacity", 1);
else $(this).css("opacity", 1);
});
$('#nav1>li').click(function(e) {
var thid = e.target.id;
if (thid[0] == 'c' && thid[1] == '1') {
alert('[table1] Clicked №'+thid[2]);
}
else if (thid[0] == 'c' && thid[1] == '2') {
alert('[table2] Clicked №'+thid[2]);
}
else {
if ($(this).hasClass("spacer")) $(this).next("li").click();
else $(this).prev("li").click();
}
});
});
</script>
</head>
<body>
<div class="table">
<ul id="nav1">
<li class="spacer"></li>
<li id="c11">Ячейка 1</li>
<li class="spacer2"></li>
<li class="spacer"></li>
<li id="c12">Ячейка 2</li>
<li class="spacer2"></li>
<li class="spacer"></li>
<li id="c13">Ячейка 3</li>
<li class="spacer2"><span class="clS"> </span></li>
</ul>
</div>
<div class="table2">
<ul id="nav1">
<li class="spacer"></li>
<li id="c21">Ячейка 1</li>
<li class="spacer2"></li>
<li class="spacer"></li>
<li id="c22">Ячейка 2</li>
<li class="spacer2"></li>
<li class="spacer"></li>
<li id="c23">Ячейка 3</li>
<li class="spacer2"><span class="clS"> </span></li>
</ul>
</div>
</body>
</html>