Блог

Главная - Вопросы по программированию - Изменение размера таблицы при наличии дерева в столбце

Изменение размера таблицы при наличии дерева в столбце

#javascript #html #css #dojo

#javascript #HTML #css #dojo

Вопрос:

Ниже я публикую некоторый код, который я использую, чтобы попытаться установить ширину таблицы в фиксированных пропорциях для каждого столбца. 10% для одного, 90% для другого.

В настоящее время я вставляю dijit.Виджет дерева с помощью javascript в теге «treeOne» div. Когда это дерево открывается, мой столбец увеличивается в ширину, чтобы вместить. Я бы хотел, чтобы она всегда была шириной 10%, несмотря ни на что, и прекратила изменять размер столбца. Что я делаю не так? 

 <table width="100%" border="1">
        <thead>
            <tr>
            <td  style="overflow:hidden;width:10%;"> Tree</td>
              <td style="width:90%;" > Query</td>                       
         </tr>
        </thead>
       <tbody>
        <td style="overflow:hidden;width:10%;">
                    <div id ="treeOne">Insert Tree here</div>
        </td>
        <td style="width:90%;">
    .
    .
    .

Ответ №1:

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

Если вы хотите, чтобы его размер был фиксированным (и при этом обрезать содержимое), попробуйте вместо этого использовать CSS с divs:

 <style type="text/css">
.col1 {
    clear:both;
    float:left;
    overflow:hidden;
    width:10%;
}
.col2 {
    float:left;
    width:90%;
}
</style>

<div class="col1">
    <div id ="treeOne">Insert Tree here</div>
</div>
<div class="col2">...</div>

Комментарии:

1. Можете ли вы показать это в контексте таблицы? Я попытался сделать это, поместив «col1» вокруг моего <td>, содержащего расширяющееся дерево, и col2 вокруг другого <td>, у которого было остальные 90%, и это сработало не так, как ожидалось. Однако, если я помещаю col1 div вокруг своего дерева div напрямую, как вы это сделали, это фактически сокращает отображение, поэтому я не могу видеть все, однако это все равно заставляет изменять размер столбца таблицы (я просто получаю ячейку, занимающую 10% ее ширины, и 90%пустое пространство, где произошло разделение

2. Я повторяю: не используйте таблицы. Предполагается, что ячейки таблицы изменяются по мере необходимости. Вместо этого используйте плавающие DIVS.

3. а .. понял, спасибо, подумал, что вы имели в виду в дополнение к таблицам