Расстояние между td и Chrome
Здравствуйте.
Столкнулся с проблемой, необходимо, чтобы несколько элементов <td> подряд были якобы одним целым, то есть, если, например, повесить cursor: pointer; на <td>, то на границах он не должен меняться на стрелку, так, собственно и есть во всех браузерах (даже IE), а вот в Google Chrome это не так, если медленно вести курсор от <td> к <td> он на некоторое время станет стрелкой на их границе. Пробовал разные комбинации всяких свойств отступов, ничего не помогло :help:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table, td, tr {
margin: 0;
padding: 0;
border-spacing: 0;
border: 0;
outline: 0;
}
td {
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<td>ffff</td><td>fff2</td>
</tr>
</table>
</body>
</html>
Надеюсь, понятно, что просто поставить cursor: pointer; всей таблице - не решение, так как это я лишь для примера сказал, мне просто важно убрать этот отступ (или что это?) Спасибо. |
вешайте курсор на TR
|
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table, td, tr {
margin: 0;
padding: 0;
border:0 solid red;
outline: 0;
}
table {
border-collapse:collapse!important;
border:1px solid red;
}
td {
height:12px;
width:12px;
cursor:pointer;
}
</style>
</head>
<body>
<table>
<tr>
<td>ffff</td><td>fff2</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table, td, tr {
margin: 0;
padding: 0;
border:0 solid red;
outline: 0;
}
table {
border-collapse:collapse!important;
border:1px solid red;
}
td {
height:12px;
width:12px;
}
tr {
cursor:pointer;
}
</style>
</head>
<body>
<table>
<tr>
<td>ffff</td><td>fff2</td>
</tr>
</table>
</body>
</html>
Да, походу devote - Прав |
Цитата:
В обоих Ваших примерах мой Chrome все равно между <td> делает курсор обычным, с кликами, значит, тоже беда. |
madd1,
ну дык уберите промежутки между ячейками, и тогда не будет мышь попадать мимо. |
madd1
Воткните в ячейки <img c margin:-2px; - они будут перекрываться |
а может в хроме просто есть еще какое нить свойство.. которое меняет таблицу.. Вообще нужно экспериментировать
|
есть у вебкита такая хрень, но вроде тоже от них мало толку.
-webkit-border-horizontal-spacing -webkit-border-vertical-spacing |
Цитата:
|
madd1,
Цитата:
|
Цитата:
На самом деле, было достаточно добавить вот такой вот span в самый последний <td> и проблема решилась для всех: Цитата:
|
А почему не использовать обычный colspan и не извращаться со склеиванием ячеек?)
Кстати, Deff, давно хотел спроcить: зафига вы используете !important где ни попадя? Это в конечном итоге может хорошенько запутать. |
Aetae,
Для border-collapse:collapse!important; привычка - использую всегда !important; если нужно слепить навечно, в ие есть траблы (отмена сего не волевого свойства) при добавке юзерами своих пользовательских сss тегов - экспериметаторов дофига - потом пол-дня ищешь Ps: !important; Естественно ставицо в 99% cлучаев на ID |
Цитата:
В итоге, вот моя полная реализация, теперь работает во всех нужных мне браузерах без багов, может и лучше всё это можно было реализовать, но пока, мне нравится:
<!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>
|
madd1,
а где кнопочка "запустить" ? |
Цитата:
|
madd1,
+ Вот эту фигню вынести в отдельную функцию с передачей двух параметров this и цифру opacity (хотя имхо терпит
if ($.browser.msie && $.browser.version < 9) return;
056 if ($(this).hasClass("spacer")) $(this).next("li").css("opacity", 1);
057 else if ($(this).hasClass("spacer2")) $(this).prev("li").css("opacity", 1);
058 else $(this).css("opacity", 1);
|
Таблица с помощью li. Это уже маразм, имхо.)
|
Цитата:
|
Требует доработки, использовать не рекомендуется
<style>
td {
border: solid 1px;
width: 200px;
cursor: pointer;
}
table {
border: solid 1px;
}
</style>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script>
window.onload =function () {
var table = document.getElementById('table');
table.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.parentNode.tagName == 'TR') {
alert(target.innerHTML);
} else if (target.tagName == 'TABLE') {
var x = e.clientX;
var y = e.clientY;
while (target.parentNode.tagName != 'TR') {
x++;
y++;
target = document.elementFromPoint(x, y);
if (target.parentNode.tagName == 'TR') {
alert(target.innerHTML);
break;
} else if (target.tagName != 'TABLE') {
alert('ha');
break;
}
}
}
}
}
</script>
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Что вам даст реализация этого способа, кроме как личного развития при его реализации: если человек кликает авось куда (а кликая на грани, абсолютно точно нельзя сказать, в какую ячейку попадёшь, только если элементы не огромного размера, а если даже они огромного размера, то пространство между ячейками также можно заметить (можно понять, что кликаешь в никуда)) ;) |
| Часовой пояс GMT +3, время: 04:32. |