0

как изменить ширину столбца в datatables? Он как-то автоматически подгоняется, а мне нужно задать ему фиксированную ширину. Пробовал уже всё: и через атрибут width, и через инлайн стили и через !important. Я думаю, это нужно сделать как-то через js.

$("#table").DataTable({});

<table width="100%" id="table" bordercolor="#E7E7E7" border="2" align="center">
  <thead class="first-row">
    <td class="table-first" width="50px" align="center" data-orderable="false">
      <input type="checkbox" id="main-chb" class="fst-chbox">
    </td>
    <td class="table-cenetr" align="center" data-orderable="false"><span class="table-captions table-photos">Фото</span></td>
    <td class="table-cenetr table-art" align="center"><span class="table-captions">Артикул</span></td>
    <td class="table-cenetr" align="center"><span class="table-captions">Товар</span></td>
    <td class="table-cenetr table-price" align="center"><span class="table-captions">Цена</span></td>
    <td class="table-cenetr table-status" align="center"><span class="table-captions">Статус</span></td>
    <td class="table-end" align="center" data-orderable="false"></td>
  </thead>
  <tr>
    <td class="table-first" width="50px" align="center"><input type="checkbox" class="oth-check"></td>
    <td class="table-cenetr table-photo" align="center"><i class="icon-eye"></i></p>
    </td>
    <td class="table-cenetr table-art" align="center">
      <p>АБВГДЕЁ1234536789</p>
    </td>
    <td class="table-cenetr">
      <p>Товар №1</p>
    </td>
    <td class="table-cenetr table-price" align="center"><span>5 200.00</span></td>
    <td class="table-cenetr table-status" align="center"><span>Вкл<i class="icon-down btn-down"></i></span></td>
    <td class="table-end" align="center">
      <input type="checkbox" id="cog-ChBox-1" onchange="chb1Fun()" class="cog-chbox">
      <label for="cog-ChBox-1" class="chbox-cog">
                                        <i class="icon-cog"></i>
                                    </label>
      <div class="cog-menu cog-menu1">
        <ul class="cog-list">
          <li>Настройка 1</li>
          <li>Настройка 2</li>
          <li>Настройка 3</li>
        </ul>
      </div>
    </td>
  </tr> 

как сделать первый столбец с чекбоксом шириной в 50px?

1 ответ 1

0

Сделайте стилями и все будет нормально

    #table td:first-child {
        width: 50px!important;
    }

Вот только вчера делал

    #table td {
        text-align: center;
        width: 10%!important;
    }
    #table td:first-child {
        width: 5%!important;
    }
    #table td:nth-child(2) {
        text-align: left;
        width: 45%!important;
    }

И все отлично:

  • у всех ячеек выравнивание по-центру, кроме второй;
  • у всех ячеек ширина 10%, кроме 1ой и 2ой (у первой 5%, у второй 45%)
7
  • не работает. я пробовал
    – EasyTactic
    30 мар 2018 в 12:06
  • Дополнил ответ, только вчера это делал. Проверяйте стили, значить что-то у вас перебивает 30 мар 2018 в 12:12
  • А возможно, чтобы ширина была в пикселях, но при изменении экрана она оставалась такой же?
    – EasyTactic
    30 мар 2018 в 12:46
  • Ну если вы её зададите в пикселях, то она однозначно останется без изменений 30 мар 2018 в 12:50
  • в том то и дело, что нет)
    – EasyTactic
    30 мар 2018 в 12:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.