Сделайте все кнопки на телешоу в одной строке, сохраняя при этом их

0

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

В каждой строке, в первой ячейке, я рисую несколько кнопок, чтобы пользователи могли активировать запись (редактировать, удалять, вводить подробный просмотр и т.д.).

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

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

Я применяю класс buttonsBlock {min-width: 1px; } to these cells, but on a certain table disposition (depending of the space occupied by the rest of the cells) some buttons fall to a second line, instead of being all together. } к этим ячейкам, но при определенном расположении таблицы (в зависимости от пространства, занимаемого остальными ячейками) некоторые кнопки попадают во вторую строку, а не все вместе.

Пример html таблицы

<table>
  <tr>
    <th></th>
    <th>Field A</th>
    <th>Field B</th>
    <th>Field C</th>
    <th>Field D</th>
    <th>Field E</th>
  </tr>
  <tr>
    <td class="buttonsBlock">
      <a href="actionButton1Url">
        <button type="button" class="btn btn-default btn-xs">
          <span class="glyphicon glyphicon-arrow-right"></span>
        </button>
      </a>
      <a href="actionButton2Url">
        <button type="button" class="btn btn-default btn-xs">
          <span class="glyphicon glyphicon-file"></span>
        </button>
      </a>
      <a href="actionButton3Url">
        <button type="button" class="btn btn-default btn-xs">
          <span class="glyphicon glyphicon-th-list"></span>
        </button>
      </a>
    </td>
    <td>Data field A</td>
    <td>Data field B</td>
    <td>Data field C</td>
    <td>Data field D</td>
    <td>Data field E</td>
  </tr>
</table>

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

Только сейчас, в зависимости от пространства, занимаемого данными по tds от A до E и количеством кнопок, все кнопки отображаются на одной строке или, иногда, последняя кнопка падает до новой строки.

Есть идеи?

Теги:
html-table

1 ответ

3
Лучший ответ

Попробуйте добавить white-space: nowrap к ячейке таблицы, которая содержит кнопки:

.buttonsBlock {
    white-space: nowrap;
}

Демо здесь: http://jsfiddle.net/5sMm8/

(Кроме того, я не уверен, почему у вас есть привязка, завернутая на кнопку.)

  • 0
    Хорошо, похоже, что он работает с .buttonsBlock {max-width: 100%; пустое пространство: nowrap; }
  • 0
    Также вы были правы, мне не нужен тег кнопки для применения стилей кнопок начальной загрузки, для этого было достаточно тега привязки.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню