调整<ul>在表格单元格中

Sizing an <ul> in a table cell

本文关键字：单元格 表格 ul lt 调整 gt      更新时间：2023-09-26

我正在构建一个由<table>组成的HTML视图，每个单元格只包含一个<ul>元素，其编号为<li>。出于可读性的原因，我的行有一个min-width: 100px;，但根据<ul>的内容进行扩展。但在其他细胞中（其中<li>的数量较低）。我希望我的<ul>使用单元格高度的100%。目前，它们保持100px的高度，并垂直居中。

我的观点可以概括为：

<table>
    <tr>
        <td>
            <ul>...</ul>
        </td>
        <td>
            <ul>...</ul>
        </td>
        <td>
            <ul>...</ul>
        </td>
    </tr>
    <tr>
        <td>
            <ul>...</ul>
        </td>
        <td>
            <ul>...</ul>
        </td>
        <td>
            <ul>...</ul>
        </td>
    </tr>
</table>

我这样做的原因是，每个<li>都可以被拖动&在每个<ul>之间丢弃，但它们没有调整大小的事实使丢弃在空列表上有点危险，因为你看不到它们，必须猜测它们在哪里。如果他们使用完整的单元格尺寸，这会容易得多。

我使用开发工具做了很多尝试，但没有找到CSS和Javascript的正确组合。

技术先决条件：

  • Javascript DOM操作还可以，我已经用它来调整表的大小了。我使用ExtJS，但我可以移植jQuery或纯JS代码
  • 必须与IE8兼容（75%的最终用户都在IE上。一定要热爱企业界…）

谢谢你的建议！

编辑：这是一个Fiddle，它尽可能地代表我的代码（NDA阻止我共享原始代码）

若要使height: 100%按预期工作，容器必须设置其height。我在下面有一个解决方案，它使用JavaScript来设置所有ul的高度，如果需要，它可以用作每次更改时运行的函数：

function fixDimensions() {
    var table = document.getElementById('table');
    var trs = table.getElementsByTagName('tr');
    for(var i = 0; i < trs.length; i++){
        var tds = trs[i].getElementsByTagName('td');
        for(var g = 0; g < tds.length; g++){
            var ul = tds[g].getElementsByTagName('ul')[0];
            ul.style.height = (tds[g].clientHeight - 12) + 'px';
        }
    }
}

高度上的- 12用于填充和边框。JSFiddle。

您可以使用td自己绘制边界：http://jsfiddle.net/P5h8d/2/

table {
    width: 100%;
    background:black;
    border-spacing:1px;
}
tr {
    min-height: 50px;
    width: 100%;
}
tbody th, tbody td {
    border: 3px dotted red;
}
 th, td {
    width: 20%;
    background:white;
}

如果：，您可能不需要表格

  1. 使用CCD_ 13而不是CCD_ 14将CCD_

演示

<section>
      <div>
        <ul>
          <li> itelm</li>...
        </ul>
        <ul>
          <li> itelm</li>...
        </ul>
        <ul>
          <li> itelm</li>...
        </ul>
      </div>
      <div>
        <ul>
          <li> itelm</li>...
        </ul>
        <ul>
          <li> itelm</li>...
        </ul>
        <ul>
          <li> itelm</li>...
        </ul>
      </div>
    </section>

CSS

section {
  display:table;
  border-spacing:5px;
}
section > div {
  display:table-row;
}
section>div>ul {
  display:table-cell;
  background:red;
  min-width:100px;
}
  1. 您使用display:flex

演示

使用的基本CSS：

tr {
  display:flex;/* reset display:defaut*/
}
td {background:gray;
display:flex;/* here again display reset */
flex-direction:column;/* make sure we draw content from top to bottom */
  margin:2px;
}
ul {
  padding:0;
  margin:5px;;
  min-width:100px;
  background:red;
  flex:1;/* fills or shares whole height of its flex box*/
}

为了不污染我的第一个答案，在这里添加了拖放js

无论ul的高度如何，li都会下降！

这里有一种CSS方法来扩展元素周围的区域，以增加它可以捕捉鼠标事件的区域。IE8理解:before/:after，所以我们使用它们。并将它们设置在ul顶部和底部的绝对位置。

演示

使用的CSS：

td {overflow:hidden;/*keep ul:pseudos inside */}
ul {
    position:relative;
}
ul:before,
ul:after {
    content:'';
    position:absolute;
    height:200px;/* whatever you need or think it is safe */
    left:0;
    width:100%;
}
ul:before {
    bottom:100%;
}
ul:after {
    top:100%;
}

添加到演示的基本HTML5拖放（属性和js），因为它从你的小提琴中丢失了。

function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
相关文章：