2016-05-14 9 views
1

Использование плагина jQuery для древовидной таблицы и попытки получить CSS для правильного выравнивания текста, когда имя ветви или имя листа обертывается на следующую строку, см. Рисунок. Обратите внимание, что именами ссылок являются имена узлов; моя ширина таблицы в реальном мире намного меньше, чем у JSFiddle, поэтому обертка является реальной проблемой. enter image description herejQuery проблема с выравниванием jQuery при переносе текста в следующую строку

HTML составлен с сервера; У меня есть некоторая гибкость здесь

See JSFiddle that mimics the generated HTML и включает в себя плагин CSS плюс тема по умолчанию.

Я попытался (inspired by)

table.treetable a.node { 
    overflow: hidden; 
} 

table.treetable span.indenter { 
    float: left; 
} 

, но это дает: enter image description here

Аналогичный вопрос raised here но при условии, ответ, кажется, не на самом деле работает в JSFiddle ответа на вызов в.

Продолжительное обсуждение jquery-treetable gitHub closed issue #142, так что я ... пробовал:

table.treetable span.indenter { 
    float:left; 
} 
table.treetable a.node { 
    display: block; 
    padding-left: 0; 
    overflow: hidden; 
} 

(это обрабатывает обертку родительский узел в порядке, но неправильно оправдывает ее ребенка лист, а также автономный лист Node 2)

Наконец попробовал «решение» в # 142 в OP сказал, работал

table.treetable span.indent{ 
    display:inline-block; 
    text-align: right; 
    } 

Это не имело никакого эффекта. Я застрял.

ответ

1

Если это то, что вы после
enter image description here

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

table.treetable tbody tr td { position: relative; padding-left: 25px; } 
table.treetable tbody tr td span.indenter { position: absolute; left: 5px; } 
+0

отлично работает! большое спасибо. – cropredy

+0

приветствую :) – Buksy