Как установить ширину столбца таблицы для динамического выпадающего списка? - PullRequest
Новая
       22

Как установить ширину столбца таблицы для динамического выпадающего списка?

3 голосов
/ 19 июня 2009

У меня есть таблица с динамическим выпадающим списком.

Ширина раскрывающегося списка будет меняться в зависимости от его содержимого.

Я бы хотел, чтобы столбец таблицы совпадал с шириной раскрывающегося списка.

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

Есть ли в CSS способ сказать, что размер столбца должен быть таким же, как и его содержимое?

Вот пример HTML-таблицы, которая включает мое текущее исправление (kludge) 

<table id="mappingtable" width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <th width="80px">FixedWidthColumn</th>
    <th width="80%">ExpandingColumn</th>
    <th width="122px">&nbsp;</th>
    <th>DynamicColumn</th>
  </tr>
  <tr>
    <td align="center">1</td>
    <td>Text</td>
    <td align="center">Button</td>
    <td align="center">DropDownList</td>
  </tr>
</table>

Проблема существует без каких-либо CSS

Если я уберу ширину = "80%" из расширяющегося столбца, динамический столбец будет иметь пробел

Я пробовал width: auto для динамического столбца и установил его на фиксированную ширину, но у меня ничего из этого не работает

Ответы [ 3 ]

1 голос
/ 19 июня 2009

Вам нужна таблица с шириной 100% и 1 столбцом без определенной ширины. Столбец с раскрывающимся списком может иметь очень небольшую ширину, и браузер автоматически сделает весь столбец соответствующим ширине раскрывающегося списка.

HTML будет выглядеть так: 

<table width="100%" >
  <tr>
    <th width="80">FixedWidthColumn</th>
    <th>ExpandingColumn</th>
    <th width="122"> </th>
    <th width="10">DynamicColumn</th>
  </tr>
  <tr>
    <td align="center">1</td>
    <td>Text</td>
    <td align="center">Button</td>
    <td align="center">DropDownList</td>
  </tr>
</table>

В качестве ответа на замечания ниже, есть несколько решений, которые вы можете изучить:

Вы можете добавить опционный тег в выпадающий список, который имеет по крайней мере определенную ширину и несколько неразрывных пробелов, например: 

<option>Please select...&nbsp;&nbsp;&nbsp;&nbsp;</option>

Вы можете присвоить тегу выбора минимальную ширину, например: 

<select style="min-width: 200px;" >
0 голосов
/ 20 июня 2009

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

Удаление 100% ширины из таблицы решит вашу проблему, если содержимое в ExpandingColumn будет достаточно большим, чтобы заполнить оставшуюся ширину.

0 голосов
/ 19 июня 2009

Почему бы вам, для этой конкретной таблицы, не переопределить данные CSS внутри параметров таблицы?

Где этот параметр передается (или анализируется где-то еще).

...