ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
17 сообщений из 17, страница 1 из 1
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607098
MAULER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MAULER
Участник
Здравствуйте.
Есть HTML таблица (часть списка SharePoint). Мне нужно изменить ширину определённого столбца у этой таблицы.

Стал разбираться что и как. "Подсмотрел" как рендерится таблица через режим отладчика Google Chrome(F12)

И судя по всему, теги <th> .. </th> там никак не поименованы, не заданы даже id .
Как мне вылавливать скриптом нужные мне заголовки не могу даже представить.

Единственное что приходит в голову это переопределить класс .ms-vh2
Ведь если задать там нужную ширину то заголовок будет выглядеть так как мне надо. Но это не правильный путь, и произойдет глобальная замена по всем столбцам с таким классом...

Как мне быть? Подскажите?
...
Рейтинг: 0 / 0
26.02.2018, 08:27
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607100
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
https://webref.ru/css
...
Рейтинг: 0 / 0
26.02.2018, 08:31
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607103
MAULER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MAULER
Участник
вадя,

А можно больше конкретики? ))
...
Рейтинг: 0 / 0
26.02.2018, 08:35
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607109
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
MAULERИ судя по всему, теги <th> .. </th> там никак не поименованы, не заданы даже id .
Как мне вылавливать скриптом нужные мне заголовки не могу даже представить.
Как мне быть? Подскажите?
Просто узнать какой по счету столбец тебе нужен. Потом использовать псевдокласс
http://htmlbook.ru/css/nth-child
...
Рейтинг: 0 / 0
26.02.2018, 08:45
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607111
MAULER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MAULER
Участник
krvsa,

А у меня примерно так и есть:

Код: css
1.
2.
3.
4.
5.
6.
7.
<style type="text/css" > 
.ms-viewheadertr th:nth-child(2) *
{  
  padding:0px;
  width:0px;
}  
</style>



Заголовок стобца конечно стал поуже, но всё равно не такой как надо. Там примерно пикселей 20-25 а мне надо 12px.
...
Рейтинг: 0 / 0
26.02.2018, 08:58
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607116
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
max-width: 12px
...
Рейтинг: 0 / 0
26.02.2018, 09:13
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607118
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
И звездочку убрать.
...
Рейтинг: 0 / 0
26.02.2018, 09:14
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607121
MAULER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MAULER
Участник
Alibek B.,

Без изменений ((
...
Рейтинг: 0 / 0
26.02.2018, 09:16
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607129
MAULER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MAULER
Участник
Хотя минутку...

Когда делаю так:

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<style type="text/css" > 
.ms-viewheadertr th:nth-child(2) 
{  
	padding:0px;	
}  
</style>

<style type="text/css" > 
.ms-viewheadertr th:nth-child(3) 
{  
	padding:0px;	
}  
</style>



То всё более-менее красиво. Но заголовок видно ((
Если внутрь стиля добавляю display:none; то всё съезжает под другие столбцы ((

Код: css
1.
2.
3.
4.
5.
6.
7.
<style type="text/css" > 
.ms-viewheadertr th:nth-child(3) 
{  
	padding:0px;	
        display:none;
}  
</style>



Как то можно сохранить форматирование, но при этом не отображать заголовок столбца?
...
Рейтинг: 0 / 0
26.02.2018, 09:26
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607138
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
MAULER,
надо и для самих столбцов задавать ширину
...
Рейтинг: 0 / 0
26.02.2018, 09:39
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607173
MAULER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MAULER
Участник
вадя,

В самих столбцах картинка - цветной квадратик 10х10 px

Какое то странное поведение...
...
Рейтинг: 0 / 0
26.02.2018, 10:22
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607237
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
MAULER,
зачем для заголовка задавать
display:none;
???
тогда уже и для td надо такое же задать
...
Рейтинг: 0 / 0
26.02.2018, 12:05
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607252
MAULER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MAULER
Участник
вадя,

Затем, чтобы он не отображался. Причем заголовок только у некоторых полей.
...
Рейтинг: 0 / 0
26.02.2018, 12:23
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607257
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
MAULER,

Код: plaintext
1.
2.
3.
display:none
    Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно 
элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через
 объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
...
Рейтинг: 0 / 0
26.02.2018, 12:37
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607260
MAULER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MAULER
Участник
вадя,

Нашел решение своей проблемы.
Возможно оно не очень красивое, но работает так как мне нужно.

Напомню, что меня не устраивала ширина некоторых столбцов, а именно, мне хотелось, чтобы ширина была не более 12px, но из-за стрелок сортировки сам хэдер был широким, и тем самым делал широким весь столбец с его содержимым.

Вариант делать в переопределении класса display:none ; не устраивал, т.к. не смотря на то, что заголовки исчезали, расстояние между столбцами уменьшить не удавалось.

В конечном итоге сработал такой вариант:

1) Переопределяем стили заголовков столбцов:

Код: css
1.
2.
3.
4.
5.
6.
<style type="text/css" > 
.ms-viewheadertr th:nth-child(2) 
{  
	padding:0px;
}  
</style>



2) В методе SPClientTemplates.TemplateManager.RegisterTemplateOverrides в разделе Templates.Header вызываем функцию возвращающую стандартный хэдер списка. Точнее его HTML блок.

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
			  
	  Templates: {	  
		Header: drawHeader,
                Fields: {
                ...
                }
          }



3) Код функции drawHeader :
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
function drawHeader(ctx) {

	var s = RenderHeaderTemplate(ctx);	
	var r1 = s.replace("1</a>", "</a>");
	var r2 = r1.replace("2</a>", "</a>");
	var r3 = r2.replace("3</a>", "</a>");
	var r4 = r3.replace("4</a>", "</a>");
	var r5 = r4.replace("5</a>", "</a>");
	
	return r5;
}


где:

"1</a>"
"2</a>"

и т.д. это названия столбцов в возвращаемой строке определения заголовков. Мы просто удаляем их и всё.
...
Рейтинг: 0 / 0
26.02.2018, 12:43
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607304
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
MAULER,
это называется .....
у меня просто нет слов
...
Рейтинг: 0 / 0
26.02.2018, 13:52
| Ответить | Цитировать | Написать  
Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
    #39607320
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
MAULER3) Код функции drawHeader :
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
function drawHeader(ctx) {

	var s = RenderHeaderTemplate(ctx);	
	var r1 = s.replace("1</a>", "</a>");
	var r2 = r1.replace("2</a>", "</a>");
	var r3 = r2.replace("3</a>", "</a>");
	var r4 = r3.replace("4</a>", "</a>");
	var r5 = r4.replace("5</a>", "</a>");
	
	return r5;
}



Так вот ты какой - говнокод!

Код: javascript
1.
2.
3.
4.
function drawHeader(ctx) {
	var s = RenderHeaderTemplate(ctx);	
	return s.replace(/\d(?=<\/a>)/,'');
}
...
Рейтинг: 0 / 0
26.02.2018, 14:30
| Ответить | Цитировать | Написать  
17 сообщений из 17, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39607111&tid=1444266]:
 0ms
get settings:
 9ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 169ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 234ms
total:  496ms
созд. / загр.: 496ms
x
x
Закрыть


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