ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CheckBox в ячейке таблицы. Вертикальное выравнивание.
8 сообщений из 8, страница 1 из 1
CheckBox в ячейке таблицы. Вертикальное выравнивание.
    #38090568
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
Всем доброго дня! Есть прокручиваемый 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:27
| Ответить | Цитировать | Написать  
CheckBox в ячейке таблицы. Вертикальное выравнивание.
    #38090587
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
SQLPowerUser, line-height попробуйте задать.
...
Рейтинг: 0 / 0
24.12.2012, 13:36
| Ответить | Цитировать | Написать  
CheckBox в ячейке таблицы. Вертикальное выравнивание.
    #38090677
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
SQLPowerUser , если хочешь сделать 100%-но правильный чекбокс - сделай его свой. Дефолтный вынесет тебе весь мосх...
...
Рейтинг: 0 / 0
24.12.2012, 14:12
| Ответить | Цитировать | Написать  
CheckBox в ячейке таблицы. Вертикальное выравнивание.
    #38090697
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
skyANASQLPowerUser, line-height попробуйте задать. Ага. В стиль td добавил line-height: 18px;
Стало гораздо ровнее.

krvsaSQLPowerUser, если хочешь сделать 100%-но правильный чекбокс - сделай его свой. Дефолтный вынесет тебе весь мосх... Вчера находил сайт http://habrahabr.ru/post/144104/
Потом, будут время, попробую.
Сейчас остановился на варианте с line-height
...
Рейтинг: 0 / 0
24.12.2012, 14:19
| Ответить | Цитировать | Написать  
CheckBox в ячейке таблицы. Вертикальное выравнивание.
    #38090715
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
навсякий
ezMark
за время около года жалоб не имею
...
Рейтинг: 0 / 0
24.12.2012, 14:26
| Ответить | Цитировать | Написать  
CheckBox в ячейке таблицы. Вертикальное выравнивание.
    #38090776
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
А меня дизайнЁры укатали. Я уже и забыл как выглядят стандартные элементы...
...
Рейтинг: 0 / 0
24.12.2012, 14:59
| Ответить | Цитировать | Написать  
CheckBox в ячейке таблицы. Вертикальное выравнивание.
    #38102847
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Всех с прошедшими праздниками! Всё-таки у меня получился кроссбраузерный вариант без изменения стиля у самого 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:07
| Ответить | Цитировать | Написать  
CheckBox в ячейке таблицы. Вертикальное выравнивание.
    #38102851
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
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
09.01.2013, 09:11
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CheckBox в ячейке таблицы. Вертикальное выравнивание.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/search_topic.php?author=Error519&author_mode=last_topics&do_search=1]:
 0ms
get settings:
 9ms
get forum list:
 16ms
get settings:
 9ms
get forum list:
 17ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 67ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 44ms
get tp. blocked users:
 1ms
others: 742ms
total:  924ms
созд. / загр.: 924ms
x
x
Закрыть


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