使jQuery UI既可以选择为表格又可以作为表格中的列表

问题描述

我为问题准备了jsFiddle-

我正在尝试在具有黄色页眉和页脚行的表中放置jQuery UI Selectable。一次在左侧单元格中作为数字网格，然后在右侧单元格中作为字母列表。

我还试图让表格占据浏览器宽度和高度的100％。

这就是为什么我将CSS属性width: 100%和height: 100vh分配给表，并将overflow-y: scroll分配给两个可选项的原因。

但是由于某种原因，右滚动条不起作用，即显示了整个字母列表，从而炸毁了桌子的高度。

TLDR：

• 数字/字母列表应该具有相同的高度并且可以滚动
• 黄色页眉/页脚应该在浏览器窗口的顶部/底部可见

这是我的代码-

Javascript：

  $(function() {
    $("#selectable1").selectable();
    $("#selectable2").selectable();
  });

CSS：

<table>
  <tr>
    <td colspan=2 bgcolor="yellow">Header1</td>
  </tr>
  <tr>
    <td>
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </td>
    <td>
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </td>
  </tr>
  <tr>
    <td colspan=2 bgcolor="yellow">Footer1</td>
  </tr>
</table>

CSS：

table {
  width: 100%;
  height: 100vh;
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100px;
  overflow-y: scroll; /* WHY IS THIS NOT WORKING? */
}

#selectable1 li,#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

我要提问的背景是，我试图创建a card game，左侧是游戏桌，右侧是大厅的球员列表-

解决方法

请考虑以下内容：https://jsfiddle.net/Twisty/uro3b2ps/17/

HTML

<div class="page">
  <div class="header">Header1</div>
  <div class="content">
    <ol id="selectable1">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
    </ol>
    <ol id="selectable2">
      <li class="ui-state-default">A</li>
      <li class="ui-state-default">B</li>
      <li class="ui-state-default">C</li>
      <li class="ui-state-default">D</li>
      <li class="ui-state-default">E</li>
      <li class="ui-state-default">F</li>
      <li class="ui-state-default">G</li>
      <li class="ui-state-default">H</li>
      <li class="ui-state-default">I</li>
      <li class="ui-state-default">J</li>
    </ol>
  </div>
  <div class="footer">
    <td colspan=2 bgcolor="yellow">Footer1</td>
  </div>
</div>

CSS

.header,.footer {
  width: 100%;
  background-color: yellow;
}

.content {
  height: 100vh;
  overflow: hidden;
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  width: calc(100% - 150px);
  float: left;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 100px;
  height: 100vh;
  overflow-y: scroll;
}

#selectable1 li,#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

还有很多其他方法可以做到这一点。 inline-block是阻止某些内容的另一种方式，但在其后留有其他元素的空间。 float也是另一种方式。

基本上，您必须为list元素设置一个高度，这将在溢出时创建一个滚动条。

已更新

https://jsfiddle.net/Twisty/uro3b2ps/21/

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 110px;
  height: 200px;
  overflow-y: scroll;
}

更新2

https://jsfiddle.net/Twisty/uro3b2ps/25/

这使用jQuery根据Window动态设置高度。

,

更新：

要支持IE 11，您可以更新CSS使其包含-ms-grid特定的样式，并且样式应该可以使用，但是您可能必须再次对其进行彻底的测试：

$(function() {
  $("#selectable1").selectable();
  $("#selectable2").selectable();
});

body {
  margin: 0;
  padding: 0;
}

.header {
  background: yellow;
  -ms-grid-row: 1; /* for IE */
}

.footer {
  background: yellow;
  -ms-grid-row: 3; /* for IE */
}

div.table {
  display: grid;
  width: 100vw;
  height: 100vh;
  
  /* for IE */
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 20px 1fr 20px;
}

div.container {
  display: grid;
  grid-template-columns: auto 140px;
  grid-column-gap: 10px;
  overflow: hidden;
  
  /* for IE */
  display: -ms-grid;
  -ms-grid-columns: 1fr 140px;
  -ms-grid-rows: 1fr;
  -ms-grid-row: 2;
}

div.container div {
  overflow: auto;
}

div.container div.column1 {
    -ms-grid-column: 1; /* for IE */
}

div.container div.column2 {
    -ms-grid-column: 2; /* for IE */
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#selectable1 li,#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="table">
  <div class="header">Header1</div>
  <div class="container">
    <div class="column1">
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </div>
    <div class="column2">
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </div>
  </div>
  <div class="footer">Footer1</div>
</div>

如果愿意用CSS Grid替换表，您应该可以使用它们来实现：

$(function() {
  $("#selectable1").selectable();
  $("#selectable2").selectable();
});

body {
  margin: 0;
  padding: 0;
}

.header,.footer {
  background: yellow;
}

div.table {
  display: grid;
  width: 100vw;
  height: 100vh;
}

div.container {
  display: grid;
  grid-template-columns: auto 140px;
  grid-column-gap: 10px;
  overflow: auto;
}

div.container div {
  overflow-y: auto;
  height: 100%;
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#selectable1 li,#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="table">
  <div class="header">Header1</div>
  <div class="container">
    <div>
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </div>
    <div>
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </div>
  </div>
  <div class="footer">Footer1</div>
</div>