Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CheckBox в ячейке таблицы. Вертикальное выравнивание. / 8 сообщений из 8, страница 1 из 1
24.12.2012, 13:27
    #38090568
SQLPowerUser
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CheckBox в ячейке таблицы. Вертикальное выравнивание.
Всем доброго дня! Есть прокручиваемый DIV с таблицей внутри. В таблице две колонки: 1-я с CheckBox, 2-я с наименованием. Хочется, чтобы CheckBox был как можно точнее по центру вертикали.
 
Пока остановился на таком варианте (почему-то самым точным оказался IE)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
#scrolling { /* прокручиваемый блок*/
  height: 116px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 116px;
}
#ProjectTable {
  table-layout: fixed;
  border-collapse: collapse;
  width: 98px;
}
td {
  border: 1px solid #abc;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 4px;
  padding-bottom: 2px;
  font-size: 10pt;
  font-family: arial;
}
td:first-child {
  padding-top: 5px;
  padding-bottom: 1px;
  text-align: center;
  vertical-align: middle;/* пробовал top, bottom, baseline. Не помогает */
}
input[type="checkbox"] {
  margin-left: 2px;
  margin-right: 2px;
  margin-top: -4px;
  margin-bottom: -2px;
}
</style>
</head>

<body>
<div id="scrolling">
  <table cellpadding="0" id="ProjectTable">
    <col width=38> <col width=70>
    <tr> <td><input type=checkbox name=list value="UID1"></td><td id="td1">Строка 1</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID2"></td><td id="td2">Строка 2</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID3"></td><td id="td3">Строка 3</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID4"></td><td id="td4">Строка 4</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID5"></td><td id="td5">Строка 5</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID6"></td><td id="td6">Строка 6</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID7"></td><td id="td7">Строка 7</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID8"></td><td id="td8">Строка 8</td> </tr>
  </table>
  </div>
</body>
</html>

Сотрудники используют в основном эти 4 браузера, CheckBox не удается выровнять по вертикали:


В Опере всегда CheckBox отображается ниже, чем у Мозиллы и Хрома.
Убирал всю эту кучу margin/padding , везде нормально, но в IE высота строки произвольно увеличиваются (некрасиво выглядит внутри DIV-a). Также пробовал height у TR и TD (высота строки пляшет, некрасиво внутри DIV-а).
По идее можно в каждую ячейку первого столбца поместить небольшой DIV, а внутри – CheckBox. Но может есть решение через стили?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.12.2012, 13:36
    #38090587
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CheckBox в ячейке таблицы. Вертикальное выравнивание.
SQLPowerUser, line-height попробуйте задать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.12.2012, 14:12
    #38090677
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CheckBox в ячейке таблицы. Вертикальное выравнивание.
SQLPowerUser , если хочешь сделать 100%-но правильный чекбокс - сделай его свой. Дефолтный вынесет тебе весь мосх...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.12.2012, 14:19
    #38090697
SQLPowerUser
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CheckBox в ячейке таблицы. Вертикальное выравнивание.
skyANASQLPowerUser, line-height попробуйте задать. Ага. В стиль td добавил line-height: 18px;
Стало гораздо ровнее.

krvsaSQLPowerUser, если хочешь сделать 100%-но правильный чекбокс - сделай его свой. Дефолтный вынесет тебе весь мосх... Вчера находил сайт http://habrahabr.ru/post/144104/
Потом, будут время, попробую.
Сейчас остановился на варианте с line-height
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.12.2012, 14:26
    #38090715
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CheckBox в ячейке таблицы. Вертикальное выравнивание.
навсякий
ezMark
за время около года жалоб не имею
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.12.2012, 14:59
    #38090776
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CheckBox в ячейке таблицы. Вертикальное выравнивание.
А меня дизайнЁры укатали. Я уже и забыл как выглядят стандартные элементы...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 09:07
    #38102847
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CheckBox в ячейке таблицы. Вертикальное выравнивание.
Всех с прошедшими праздниками! Всё-таки у меня получился кроссбраузерный вариант без изменения стиля у самого CheckBox
 
Оказалось всё гораздо проще…
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
#DataDiv {
  height:110px;
  width:122px;
  border-bottom: 1px solid grey;
  border-left: 1px solid grey;
  overflow-y: scroll;
  overflow-x: hidden;
}
#DataTable {
  table-layout:fixed;
  border-collapse:collapse;
  width:105px;
  font-family:Arial,sans-serif;
  font-size:10pt;    
}
td {
  border-top: 1px solid grey;
  border-right: 1px solid grey;
  padding-left: 2px;
}
td:first-child { /* Стиль для 1-го столбца таблицы */
  text-align: center;
  padding-top: 2px;
}
</style>
</head>

<body>
<div id="DataDiv">
  <table cellpadding="0" id="DataTable">
    <col width=35> <col width=70>
    <tr> <td><input type=checkbox name=list value="UID1"></td><td id="td1">Строка 1</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID2"></td><td id="td2">Строка 2</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID3"></td><td id="td3">Строка 3</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID4"></td><td id="td4">Строка 4</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID5"></td><td id="td5">Строка 5</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID6"></td><td id="td6">Строка 6</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID7"></td><td id="td7">Строка 7</td> </tr>
    <tr> <td><input type=checkbox name=list value="UID8"></td><td id="td8">Строка 8</td> </tr>
  </table>
  </div>
</body>
</html>


Результат:

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.01.2013, 09:11
    #38102851
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CheckBox в ячейке таблицы. Вертикальное выравнивание.
2 SQLPowerUser

вот это интересная вещь, не встречал, спасибо!
Код: html
1.
2.
3.
4.
5.
6.
td:first-child {
  padding-top: 5px;
  padding-bottom: 1px;
  text-align: center;
  vertical-align: middle;/* пробовал top, bottom, baseline. Не помогает */
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CheckBox в ячейке таблицы. Вертикальное выравнивание. / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 446ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448881]:
 0ms
get settings:
 7ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 152ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 45ms
get tp. blocked users:
 1ms
others: 212ms
total:  446ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]