Ориентировать span с изображением внутри колонны td

Поскольку я могу ориентировать один внутри одного таблицы?. Он немного обременительный помещать их в тему... я использую Laravel 5.2 и DataTable jquery. Это колонна, что ко мне прибывает стоимость 1 или 0 и я, в моем javascript я заменяю из-за gliphicon, если стоимости 1, или если стоимости 0, чтобы получать изображение, которое я присоединяю им. Тема состоит в том, что он мне хотелся бы, что она была сориентирована (колонна Включила):

introducir la descripción de la imagen aquí

2
задан 31.05.2017, 22:28
3 ответа

Когда ты веришь в таблицу, используй ее opciГіn columns, чтобы мочь aГ±adir класс во все td конкретной колонны с className. Datatables приходит с классами, чтобы выравнивать ячейки, если ты используешь Ваши стили, ты можешь использовать класс dt-center или использовать класс bootstrap: text-center:

var table = $('#lotes-establecimiento').DataTable({
  "columns": [{
    "data": "lote"
  }, {
    "data": "tipo"    
  }, {
    "data": "activo"
    "className": "text-center"
  },{
    "data":"descripcion"
  }]
});
3
ответ дан 24.11.2019, 12:46

Как один span это элемент inline, ты можешь использовать text-align: center чтобы ориентировать элемент внутри колонны.

Пример:

td{
  width: 300px;
  background-color: green;
  text-align: center;
}
<table>
  <tr>
  <td><span>Esto es una prueba</span></td>
  </tr>
</table>

Как он прокомментировал тебе @rnd, используя селектор прямо элемента он изменится для всех элементов этого типа, который у тебя будет на твоей странице. Я просто это поместил подобно быстрому примеру для того, чтобы ты видел, что было возможно ориентировать посредством свойства text-align: center. В случае, если таблица была статической ты мог бы использовать класс.

Поскольку в твоем случае, таблица создается dinámicamente, ты можешь ссылаться на колонну 3 из каждой линий посредством селектора nth-child(3) используя tr > td:nth-child(3). Это показывает, что он взял элемент td с положением 3, которые были бы сыном одного tr.

Пример:

td{
    width: 100px;
    background-color: green;
}

tr > td:nth-child(3){
   text-align: center;
}
<table>
  <tr>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
  </tr>
  <tr>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
  </tr>
  <tr>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
    <td><span>Esto es una prueba</span></td>
  </tr>
</table>
4
ответ дан 24.11.2019, 12:46
  • 1
    недостаток состоит в том, что он ориентирует это мне для ВСЕХ колонн и не идея... только я хочу сориентировать эту колонну. – Emiliano Torres 03.11.2016, 02:00
  • 2
    @EmilianoTorres это проходит по тому, что с этим селектором (td) ты топчешь стили всех элементов <td>, если ты взамен используешь класс и она добавляешь к твоим <td>, что оно функционировало бы, как ты хочешь. В любом случае, сосредоточись на моем ответе, так как ты не нуждаешься в том, чтобы добавить css добавочный, так как bootstrap incuye класс, чтобы делать само. – rnrneverdies 03.11.2016, 02:29
  • 3
    @EmilianoTorres Уже издан ответ. – Francisco Romero 03.11.2016, 08:43
  • 4
    Error404, спасибо!. Функционируй хорошо. Только, который я у себя остаюсь с ответом @blonfu ввиду того, что это больше espec и # 237; fica относительно использования DataTables. Спасибо снова из-за сотрудничества! – Emiliano Torres 03.11.2016, 13:35
  • 5
    @EmilianoTorres ничего:) S и # 237; у него есть м и # 225; s чувство для этого случая относительно контекста и поэтому я дал ему +1. Хорошее моего примера состоит в том, что ты можешь использовать это для любой таблицы и не только для DataTables. Приветствие:) – Francisco Romero 03.11.2016, 13:37

Так как ты используешь Bootstrap, ты не нуждаешься в том, чтобы добавить добавочного CSS.

Добавляет класс .text-center к контейнеру, как во второй линии этого примера.

Salu2

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<table class="table table-bordered">
  <tr>
  <td><span class="glyphicon glyphicon-ok"></span></td>
  </tr>
  <tr>
  <td class="text-center"><span class="glyphicon glyphicon-ok"></span></td>
  </tr>
</table>
0
ответ дан 24.11.2019, 12:46
  • 1
    дело в том, что у меня нет определенного td... я это d и # 225; DataTable. У меня в моем одиноком html есть header... оставшаяся часть приходит динамический из-за DataTable – Emiliano Torres 03.11.2016, 04:40
  • 2
    @EmilianoTorres ах. я стержень, который ты использовал dataTable., обрати внимание ответ blonfu. Если ты используешь другой plugin подмостков, чем упомянутый в этой возвращенной предупреди меня. Salu2 – rnrneverdies 03.11.2016, 12:58

Теги

Похожие вопросы