Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
MAULER
Member

Откуда:
Сообщений: 825
Здравствуйте.
Есть HTML таблица (часть списка SharePoint). Мне нужно изменить ширину определённого столбца у этой таблицы.

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

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

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

Как мне быть? Подскажите?
26 фев 18, 08:27    [21217821]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16055
https://webref.ru/css
26 фев 18, 08:31    [21217826]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
MAULER
Member

Откуда:
Сообщений: 825
вадя,

А можно больше конкретики? ))
26 фев 18, 08:35    [21217832]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13226
MAULER
И судя по всему, теги <th>..</th> там никак не поименованы, не заданы даже id.
Как мне вылавливать скриптом нужные мне заголовки не могу даже представить.
Как мне быть? Подскажите?

Просто узнать какой по счету столбец тебе нужен. Потом использовать псевдокласс
http://htmlbook.ru/css/nth-child
26 фев 18, 08:45    [21217845]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
MAULER
Member

Откуда:
Сообщений: 825
krvsa,

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

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


Заголовок стобца конечно стал поуже, но всё равно не такой как надо. Там примерно пикселей 20-25 а мне надо 12px.
26 фев 18, 08:58    [21217856]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
Alibek B.
Member

Откуда:
Сообщений: 3153
max-width: 12px
26 фев 18, 09:13    [21217870]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
Alibek B.
Member

Откуда:
Сообщений: 3153
И звездочку убрать.
26 фев 18, 09:14    [21217872]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
MAULER
Member

Откуда:
Сообщений: 825
Alibek B.,

Без изменений ((
26 фев 18, 09:16    [21217877]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
MAULER
Member

Откуда:
Сообщений: 825
Хотя минутку...

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

<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; то всё съезжает под другие столбцы ((

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


Как то можно сохранить форматирование, но при этом не отображать заголовок столбца?
26 фев 18, 09:26    [21217893]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16055
MAULER,
надо и для самих столбцов задавать ширину
26 фев 18, 09:39    [21217922]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
MAULER
Member

Откуда:
Сообщений: 825
вадя,

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

Какое то странное поведение...
26 фев 18, 10:22    [21218020]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16055
MAULER,
зачем для заголовка задавать
display:none;
???
тогда уже и для td надо такое же задать
26 фев 18, 12:05    [21218434]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
MAULER
Member

Откуда:
Сообщений: 825
вадя,

Затем, чтобы он не отображался. Причем заголовок только у некоторых полей.
26 фев 18, 12:23    [21218506]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16055
MAULER,

display:none
Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно
элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через
объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
26 фев 18, 12:37    [21218549]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
MAULER
Member

Откуда:
Сообщений: 825
вадя,

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

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

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

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

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

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


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

	SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
			  
	  Templates: {	  
		Header: drawHeader,
                Fields: {
                ...
                }
          }


3) Код функции drawHeader:
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>"

и т.д. это названия столбцов в возвращаемой строке определения заголовков. Мы просто удаляем их и всё.
26 фев 18, 12:43    [21218564]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16055
MAULER,
это называется .....
у меня просто нет слов
26 фев 18, 13:52    [21218847]     Ответить | Цитировать Сообщить модератору
 Re: Есть HTML-таблица. Как изменить ширину заголовка у заданного столбца?  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 13226
MAULER
3) Код функции drawHeader:
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;
}  


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

function drawHeader(ctx) {
	var s = RenderHeaderTemplate(ctx);	
	return s.replace(/\d(?=<\/a>)/,'');
}  
26 фев 18, 14:30    [21218971]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить