使用 100% 容器高度调整表格列大小

Question

对于 html 表格，我正在尝试实现 100% 的容器高度以及表格列大小调整功能。 即，当内容高度超过包含 div 的高度（而不是 thead 和 tfoot）时，只有 tbody 应该滚动。并且应该可以调整表格列的大小。 出于某种原因，我只想使用一个表格元素（我不想通过为 thead 和 tbody 使用单独的表格来实现这一点）。

我根据here 给出的建议尝试了以下小提琴

这些是我尝试过的小提琴

1.http://jsfiddle.net/Ld4uv0a4/2/

table.scroll {
    /* width: 100%; */ /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
    height: 30px;
    line-height: 30px;
    /* text-align: left; */
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
    /* width: 20%; */ /* Optional */
    border-right: 1px solid black;
    /* white-space: nowrap; */
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}

2.https://jsfiddle.net/wwjgozqp/

.table-container {
    height: 10em;
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead,
table tbody tr {
    display: table;
    table-layout: fixed;
}
/* decorations */
.table-container {
    border: 1px solid black;
    padding: 0.3em;
}
table {
    border: 1px solid lightgrey;
}
table td, table th {
    padding: 0.3em;
    border: 1px solid lightgrey;
}
table th {
    border: 1px solid grey;
}

但似乎没有任何效果。谁能帮我实现这两种效果（列调整大小和 100% 容器高度）。

Answer 1

当您调整列标题的大小时，您还需要更新相应的列。

这是你可以做的。它可能需要一些微调，但您可以以此为起点。

//following code is used for column resize
$(function() {
  $("table").find("th").each(function(i, item) {
    var $th = $(this);
    var text = $th.text();
    $th.html("");
    var $colHandle = $("<div class='colHandle'></div>");
    var colResizer = $("<div class='colResizer'></div>").html(text).append($colHandle);
    $th.append(colResizer);
    $colHandle.mousedown(function(e) {
      var startX = e.clientX;
      $(document).bind("mousemove", function(e) {
        var width = $th.width() + (e.clientX - startX);
        $th.width(width);
        var idx = $th.index() + 1;
        $("table tr td:nth-of-type(" + idx + ")").width(width);
        startX = e.clientX;
      });
      $(document).mouseup(function() {
        $(document).unbind("mousemove");
      });
    });

  });

});

.table-container {
  height: 10em;
}
table {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}
table thead {
  /* head takes the height it requires, 
    and it's not scaled when table is resized */
  flex: 0 0 auto;
  width: calc(100% - 0.9em);
}
table tbody {
  /* body takes all the remaining available space */
  flex: 1 1 auto;
  display: block;
  overflow-y: scroll;
}
table tbody tr {
  width: 100%;
}
table thead,
table tbody tr {
  display: table;
  table-layout: fixed;
}
/* decorations */

.table-container {
  border: 1px solid black;
  padding: 0.3em;
}
table {
  border: 1px solid lightgrey;
}
table td,
table th {
  padding: 0.3em;
  border: 1px solid lightgrey;
}
table th {
  border: 1px solid grey;
}
.colResizer {
  background-color: red;
  position: relative;
  cursor: e-resize;
}
.colHandle {
  height: 20px;
  width: 20px;
  background-color: transparent;
  position: absolute;
  right: -10px;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
      </tr>
    </tbody>
  </table>
</div>

// Change the selector if needed
var $table = $('table.scroll'),
  $bodyCells = $table.find('tbody tr:first').children(),
  colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
  // Get the tbody columns width array
  colWidth = $bodyCells.map(function() {
    return $(this).width();
  }).get();

  // Set the width of thead columns
  $table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
  });
}).resize(); // Trigger resize handler

//following code is used for column resize
$(function() {
  $("table").find("th").each(function(i, item) {
    var $th = $(this);
    var text = $th.text();
    $th.html("");
    var $colHandle = $("<div class='colHandle'></div>");
    var colResizer = $("<div class='colResizer'></div>").html(text).append($colHandle);
    $th.append(colResizer);
    $colHandle.mousedown(function(e) {
      var startX = e.clientX;
      $(document).bind("mousemove", function(e) {
        let width = $th.width() + (e.clientX - startX);
        $th.width(width);
        let idx = $th.index() + 1;
        startX = e.clientX;
        $("table tr td:nth-of-type(" + idx + ")").width(width);
      });
      $(document).mouseup(function() {
        $(document).unbind("mousemove");
      });
    });

  });

});

table.scroll {
  /* width: 100%; */
  /* Optional */
  /* border-collapse: collapse; */
  border-spacing: 0;
  border: 2px solid black;
}
table.scroll tbody,
table.scroll thead {
  display: block;
}
thead tr th {
  height: 30px;
  line-height: 30px;
  /* text-align: left; */
}
table.scroll tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}
tbody {
  border-top: 2px solid black;
}
tbody td,
thead th {
  /* width: 20%; */
  /* Optional */
  border-right: 1px solid black;
  /* white-space: nowrap; */
}
tbody td:last-child,
thead th:last-child {
  border-right: none;
}
.colResizer {
  background-color: red;
  position: relative;
  cursor: e-resize;
}
.colHandle {
  height: 20px;
  width: 20px;
  background-color: transparent;
  position: absolute;
  right: -10px;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="scroll">
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
      <th>Head 4</th>
      <th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Lorem ipsum dolor sit amet.</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
  </tbody>
</table>