Изменение размера столбца таблицы происходит неправильно - PullRequest
Новая
       46

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

0 голосов
/ 18 апреля 2019

Я пытался внедрить плагин jQuery-UI, чтобы изменить размер столбца таблицы с помощью перетаскивания.

Я получил это: 

$("#table,#table table tr th,#table table tr td").resizable({
     handles: 'e'
});

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

Я не знаю, как решить эту проблему ... Есть идеи?Заранее спасибо

1 Ответ

0 голосов
/ 18 апреля 2019

На основе вашего примера кода рассмотрим следующий пример. 

$(function() {
  $("table").resizable();
  $("table thead th").resizable({
    handles: 'e'
  });
});
table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

table th {
  background: #CCC;
  width: 120px;
  min-width: 2em;
}

table thead tr .ui-resizable-e {
  border: 1px solid black;
  width: 2px;
  height: 17px;
  background: #666;
  top: 1px;
  right: -2px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<table>
  <thead>
    <tr>
      <th>H1</th>
      <th>H2</th>
      <th>H3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr>
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>

Это позволяет пользователю изменять размер заголовка, а по доверенности структуры таблицы размеры столбцов.

Надеюсь, это поможет.

...