我怎样才能让 table-cell-formatted DIV 中的两个 UL 与顶部齐平？

Question

jQuery(function() {
  jQuery(".collection").sortable({});

  jQuery('li', jQuery('.collection')).draggable({
    'connectToSortable': '.collection',
    'cancel': 'a.ui-icon',
    'revert': 'invalid',
    'containment': 'document',
    'cursor': 'move'
  });
});

body {
  background-color: silver;
  font-family: Verdana, Georgia;
}

div.main {
  margin-left: auto;
  margin-right: auto;
  width: 740px;
}

div.table {
  display: table;
  width: 740px;
}

div.td {
  display: table-cell;
  margin-top: 0;
  width: 50%;
}

div.tr {
  display: table-row;
}

ul.collection {
  background-color: white;
  list-style: none;
  padding-left: 0;
  min-height: 100px;
  padding-left: 0;
  width: 200px;
}

ul.collection>li {}

ul#selection {
  right: 0;
}

ul#source {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="/stylesheets/page.css" />
</head>

<body>
  <div class="main">
    <div class="table">
      <div class="tr">
        <div class="td">
          <ul id="source" class="collection">
            <li class="draggable">Everything</li>
            <li class="draggable">Nonfiction</li>
            <li class="draggable">Fiction</li>
            <li class="draggable">Poetry</li>
          </ul>
        </div>
        <div class="td">
          <ul id="selection" class="collection">
          </ul>
        </div>
      </div>
    </div>
    <script src="/javascripts/jquery.js"></script>
    <script src="/javascripts/jquery-ui.js"></script>
    <script>
      jQuery(function() {
        jQuery(".collection").sortable({});

        jQuery('li', jQuery('.collection')).draggable({
          'connectToSortable': '.collection',
          'cancel': 'a.ui-icon',
          'revert': 'invalid',
          'containment': 'document',
          'cursor': 'move'
        });
      });
    </script>
  </div>
</body>

</html>

此脚本旨在使 LI 可在两个 UL 之间拖动。运行时，左侧 table-cell-styled DIV 中填充的 UL 不会与 table-styled DIV 的顶部齐平；看起来它的顶部松散（或完全）与右侧空 table-cell 的底部对齐。初始图片，不同背景，如下：

如果两个 UL 都有至少一个 LI，则它们会根据需要朝顶部齐平对齐。如果最后一个 LI 被拖过来，会出现闪烁效果。所需的齐平外观是：

我想进行设置，使两个 UL 都位于其模拟 table 单元格的顶部，无论它们是填充的还是空的。

Answer 1

通过在 div.td 元素上使用 vertical-align: top 垂直对齐 table-cell。这将告诉 table-cell 将贴到顶部。

参见下面的演示：

jQuery(function() {
  jQuery(".collection").sortable({});

  jQuery('li', jQuery('.collection')).draggable({
    'connectToSortable': '.collection',
    'cancel': 'a.ui-icon',
    'revert': 'invalid',
    'containment': 'document',
    'cursor': 'move'
  });
});

body {
  background-color: silver;
  font-family: Verdana, Georgia;
}

div.main {
  margin-left: auto;
  margin-right: auto;
  width: 740px;
}

div.table {
  display: table;
  width: 740px;
}

div.td {
  display: table-cell;
  margin-top: 0;
  width: 50%;
  vertical-align: top;
}

div.tr {
  display: table-row;
}

ul.collection {
  background-color: white;
  list-style: none;
  padding-left: 0;
  min-height: 100px;
  padding-left: 0;
  width: 200px;
}

ul.collection>li {}

ul#selection {
  right: 0;
}

ul#source {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="/stylesheets/page.css" />
</head>

<body>
  <div class="main">
    <div class="table">
      <div class="tr">
        <div class="td">
          <ul id="source" class="collection">
            <li class="draggable">Everything</li>
            <li class="draggable">Nonfiction</li>
            <li class="draggable">Fiction</li>
            <li class="draggable">Poetry</li>
          </ul>
        </div>
        <div class="td">
          <ul id="selection" class="collection">
          </ul>
        </div>
      </div>
    </div>
    <script src="/javascripts/jquery.js"></script>
    <script src="/javascripts/jquery-ui.js"></script>
    <script>
      jQuery(function() {
        jQuery(".collection").sortable({});

        jQuery('li', jQuery('.collection')).draggable({
          'connectToSortable': '.collection',
          'cancel': 'a.ui-icon',
          'revert': 'invalid',
          'containment': 'document',
          'cursor': 'move'
        });
      });
    </script>
  </div>
</body>

</html>

我怎样才能让 table-cell-formatted DIV 中的两个 UL 与顶部齐平？

How can I get two UL's in table-cell-formatted DIV's to be flush against the top?

jquery

html

css

vertical-alignment

css-tables