Перекрытие текста фонового изображения ячейки таблицы CSS

Question

Я использую плагин Tablesorter Jquery для сортировки таблицы, но фоновые изображения изображений, указанные в таблице стилей, отстают от текста в столбцах, в которых фактическое содержимое столбца недостаточно длинное, чтобы увеличить ширину столбца. длина заголовка текста.

Например, перейдите сюда: http://tablesorter.com/docs/ и затем уменьшите браузер, пока стрелки вверх / вниз не окажутся за текстом столбца Возраст. У меня происходит нечто подобное.

Я могу жестко запрограммировать ширину столбца, чтобы он был достаточно широким, но я предпочел бы иметь более повторно используемое решение в файле CSS.

Так кто-нибудь знает, как задать определенную "padding" для a. Кажется, что отступы справа и margin-right не имеют никакого эффекта.

Answer 1

Используйте следующий CSS:

thead th
{
    padding-right: 20px;
}

Это решает проблему, создавая «пустое» пространство, где изображение будет.

Answer 2

Это то, что сейчас в вашей клетке:

<th class="header">Last Name</th>

Фоновое изображение устанавливается в заголовке класса, поэтому вы можете заказать asc или desc

Полагаю, единственное решение - попробовать что-то вроде этого

<th class="header">
<div style="margin-right: 10px;">Last Name</div>
</th>

таким образом, ваше изображение всегда будет справа от вашего заголовка надеюсь, это поможет

Answer 3

или просто добавьте это к вашему CSS:

th.header {
    padding-right: 20px;
}

Answer 4

Я знаю, что это старый вопрос, но я столкнулся с ним, когда столкнулся с той же проблемой и обнаружил, что отступы или поля на th не помогают

Tablesorter добавляет div в заголовок для вас, и вы можете добавить margin-right к div для решения проблемы.

Сортировщик таблиц заставляет заголовки выглядеть так:

<th data-column="2" class="tablesorter-header">
    <div class="tablesorter-header-inner">Header Text Here</div>
</th>

Итак, на div я положил эту CSS:

table.tablesorter thead tr th .tablesorter-header-inner {
    margin-right: 15px;
}