Изменение размера ширины столбцов (заголовков) и ширины таблицы на 100% в CSS jQuery - PullRequest
Новая
       1

Изменение размера ширины столбцов (заголовков) и ширины таблицы на 100% в CSS jQuery

4 голосов
/ 20 февраля 2020

У меня есть гибкая прокручиваемая таблица HTML, в которую я пытаюсь добавить функцию изменения размера столбцов (изменение ширины) при перетаскивании. Хотя мой код работает нормально, за исключением некоторых проблем CSS / jQuery, которые объясняются ниже:

  • Если я применю 100% ширину к таблице, а столбцы таблицы будут меньше, тогда столбцы не изменят размер должным образом - они расширяются с обеих сторон. (См. DEMO 1)
  • Если я не применяю 100% ширины к таблице, и столбцов таблицы достаточно, то размер столбцов даже не изменяется. (См. DEMO 2)
  • В окне предупреждения не отображается правильная измененная ширина заголовка таблицы.

Поскольку моя таблица динамическая c - не знаю в укажите, сколько столбцов будет в таблице, поэтому НЕ МОЖЕТЕ применять или НЕ МОГУТ удалять ширину таблицы.

DEMO 1

Когда у нас меньше столбцов 

$(document).ready(function(){
  var pressed = false;
  var tb_header;
  var startX, startWidth;
  var th_id, th_width;

  $(document).on("mousedown", ".column_heading_resize", function(e){
    tb_header = $(this).parents("th");
    pressed = true;
    startX = e.pageX;
    startWidth = $(tb_header).width();
    $(tb_header).addClass("resizing");
    $(tb_header).addClass("noSelect");
  });

  $(document).mousemove(function(e){
    if(pressed)
    {
      $(tb_header).width(startWidth + (e.pageX - startX));
    }
  });

  $(document).mouseup(function(){
    if(pressed)
    {
      $(tb_header).removeClass("resizing");
      $(tb_header).removeClass("noSelect");
      pressed = false;

      th_id = $(tb_header).data("id");
      th_width = $(tb_header).width();
      var dataString = "th_id="+th_id+"&th_width="+th_width;

      alert("th id = " + th_id + "\ndata width = " + th_width);
    }
  });
});
#tb_wrapper {
  border:1px solid #cccccc;
  max-width:960px;
  margin:50px auto;
  padding:10px;
}

#tb_responsive {
  overflow-x:auto;
  overflow-y:hidden;
}

.tb_records {
  border-collapse:collapse;
  text-align:left;
  width:100%;
  table-layout:fixed;
}

.tb_records th {
  font-weight:bold;
  position:relative;
  min-width:50px;
  max-width:350px;
  background-color:#4c4c4c;
  color:#ffffff;
}

.tb_records th, .tb_records td {
  padding:10px;
  border:1px solid #000000;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tb_records tr:nth-child(even) {
  background-color:#F2F2F2;
}

.column_heading_resize {
  cursor:col-resize;
  position:absolute;
  top:0;
  bottom:0;
  right:0px;
  width:3px;
}

.noSelect {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
<link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="tb_wrapper">
  <div id="tb_responsive">
    <table class="tb_records">
      <thead>
        <tr>
          <th style="width:75px;">Row ID</th>
          <th data-id="1" data-width="100" style='width:100px;'>Column 1<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="2" data-width="100" style='width:100px;'>Column 2<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="3" data-width="100" style='width:100px;'>Column 3<span class='column_heading_resize'>&nbsp;</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
        <td>1</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>2</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>3</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>4</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>5</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>6</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>7</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>8</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>9</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>10</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

DEMO 2

Когда у нас будет больше столбцов 

$(document).ready(function(){
  var pressed = false;
  var tb_header;
  var startX, startWidth;
  var th_id, th_width;

  $(document).on("mousedown", ".column_heading_resize", function(e){
    tb_header = $(this).parents("th");
    pressed = true;
    startX = e.pageX;
    startWidth = $(tb_header).width();
    $(tb_header).addClass("resizing");
    $(tb_header).addClass("noSelect");
  });

  $(document).mousemove(function(e){
    if(pressed)
    {
      $(tb_header).width(startWidth + (e.pageX - startX));
    }
  });

  $(document).mouseup(function(){
    if(pressed)
    {
      $(tb_header).removeClass("resizing");
      $(tb_header).removeClass("noSelect");
      pressed = false;

      th_id = $(tb_header).data("id");
      th_width = $(tb_header).width();
      var dataString = "th_id="+th_id+"&th_width="+th_width;

      alert("th id = " + th_id + "\ndata width = " + th_width);
    }
  });
});
#tb_wrapper {
  border:1px solid #cccccc;
  max-width:960px;
  margin:50px auto;
  padding:10px;
}

#tb_responsive {
  overflow-x:auto;
  overflow-y:hidden;
}

.tb_records {
  border-collapse:collapse;
  text-align:left;
  table-layout:fixed;
}

.tb_records th {
  font-weight:bold;
  position:relative;
  min-width:50px;
  max-width:350px;
  background-color:#4c4c4c;
  color:#ffffff;
}

.tb_records th, .tb_records td {
  padding:10px;
  border:1px solid #000000;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tb_records tr:nth-child(even) {
  background-color:#F2F2F2;
}

.column_heading_resize {
  cursor:col-resize;
  position:absolute;
  top:0;
  bottom:0;
  right:0px;
  width:3px;
}

.noSelect {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
<link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="tb_wrapper">
  <div id="tb_responsive">
    <table class="tb_records">
      <thead>
        <tr>
          <th style="width:75px;">Row ID</th>
          <th data-id="1" data-width="100" style='width:100px;'>Column 1<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="2" data-width="100" style='width:100px;'>Column 2<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="3" data-width="100" style='width:100px;'>Column 3<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="4" data-width="100" style='width:100px;'>Column 4<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="5" data-width="100" style='width:100px;'>Column 5<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="6" data-width="100" style='width:100px;'>Column 6<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="7" data-width="100" style='width:100px;'>Column 7<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="8" data-width="100" style='width:100px;'>Column 8<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="9" data-width="100" style='width:100px;'>Column 9<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="10" data-width="100" style='width:100px;'>Column 10<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="11" data-width="100" style='width:100px;'>Column 11<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="12" data-width="100" style='width:100px;'>Column 12<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="13" data-width="100" style='width:100px;'>Column 13<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="14" data-width="100" style='width:100px;'>Column 14<span class='column_heading_resize'>&nbsp;</span></th>
          <th data-id="15" data-width="100" style='width:100px;'>Column 15<span class='column_heading_resize'>&nbsp;</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
        <td>1</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>2</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>3</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>4</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>5</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>6</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>7</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>8</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>9</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
        <tr>
        <td>10</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        <td>Some Value</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Какими должны быть идеальные решения моих вышеуказанных проблем? Есть идеи?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...