主页 / coding / 问题 / 78531834
Accepted
pileup
Asked: 2024-05-25 16:15:30 +0800 CST

如何通过设置TH的宽度来允许调整TD的大小小于内容？

  • 772

我制作了一个带有可调整大小的列的表格。我正在设置元素的宽度th。但看起来它不允许我将宽度设置为低于最长的宽度td。

我想要做的是将列的大小调整为最小值。

允许td小于内容的有效方法是设置max-width，但是我不想有max-width. 如果我没记错的话，min-width在桌子上不起作用。

我有什么可以做的吗？或者在这种情况下，最好尝试使用 CSS 网格创建表格？

我的目标是允许调整列的大小低于th和td内容并显示省略号（使用...）

activateTableResize();

function activateTableResize() {
  let table, tableContainer, resizeable, currentResizeBar, currentTh, tableFirstRow, tableRect, currentResizeBarRect;
  document.addEventListener("mousedown", (event) => {
    if (event.target.closest('.resize-bar')) {
      resizeable = true;
      currentResizeBar = event.target;
      currentTh = event.target.closest('th');
      table = document.getElementById('my-table');
      tableContainer = document.getElementById('my-table-container');
      tableFirstRow = table.querySelector('tbody tr');
      tableRect = tableContainer.getBoundingClientRect();
      currentResizeBarRect = currentResizeBar.getBoundingClientRect();
      document.querySelector("body").style.cursor = "col-resize";
      document.querySelector("body").style.userSelect = "none";
    }
  });

  document.addEventListener("mousemove", (event) => {
    if (resizeable) {
      if (event.clientX + 5 < tableContainer.getBoundingClientRect().right) {
        let distanceMoved = event.clientX - currentTh.getBoundingClientRect().x;
        currentTh.style.width = `${distanceMoved}px`;
      }
    }
  });

  document.addEventListener("mouseup", (event) => {
    document.querySelector("body").style.cursor = "default";
    document.querySelector("body").style.userSelect = "default";
    resizeable = false;
  });
}
#my-table-container {}

#my-table {
  margin: 0;
  padding: 0;
  text-align: left;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

#my-table thead {
  border-top: 2px solid rgb(140 140 140);
  border-left: 2px solid rgb(140 140 140);
}

#my-table th {
  position: relative;
  margin: 0;
  padding: 0;
}

#my-table th:first-child {
  width: 150px;
}

#my-table th .resize-bar {
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: black;
  cursor: col-resize;
}

#my-table tbody td div.cell-container,
#my-table thead th div.cell-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div id="my-table-container">
  <table id="my-table">
    <thead>
      <tr>
        <th scope="col">
          <div class="cell-container">Name<span class="resize-bar"><span></div></th>
                <th scope="col"><div class="cell-container">Type<span class="resize-bar"><span></div></th>
                <th scope="col"><div class="cell-container">Size<span class="resize-bar"></span></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="cell-container">James Smith</div>
        </td>
        <td>
          <div class="cell-container">20</div>
        </td>
        <td>
          <div class="cell-container">[email protected]</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="cell-container">Jane Doe</div>
        </td>
        <td>
          <div class="cell-container">19</div>
        </td>
        <td>
          <div class="cell-container">[email protected]</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

javascript

1 个回答

  1. Best Answer
    1. 进行.cell-container绝对定位和td,th相对定位
    2. 设置高度和行高td,th
    3. 将调整大小范围移到外部.cell-container（这样就不会被剪切）

    activateTableResize();

function activateTableResize() {
  let table, tableContainer, resizeable, currentResizeBar, currentTh, tableFirstRow, tableRect, currentResizeBarRect;
  document.addEventListener("mousedown", (event) => {
    if (event.target.closest('.resize-bar')) {
      resizeable = true;
      currentResizeBar = event.target;
      currentTh = event.target.closest('th');
      table = document.getElementById('my-table');
      tableContainer = document.getElementById('my-table-container');
      tableFirstRow = table.querySelector('tbody tr');
      tableRect = tableContainer.getBoundingClientRect();
      currentResizeBarRect = currentResizeBar.getBoundingClientRect();
      document.querySelector("body").style.cursor = "col-resize";
      document.querySelector("body").style.userSelect = "none";
    }
  });

  document.addEventListener("mousemove", (event) => {
    if (resizeable) {
      if (event.clientX + 5 < tableContainer.getBoundingClientRect().right) {
        let distanceMoved = event.clientX - currentTh.getBoundingClientRect().x;
        currentTh.style.width = `${distanceMoved}px`;
      }
    }
  });

  document.addEventListener("mouseup", (event) => {
    document.querySelector("body").style.cursor = "default";
    document.querySelector("body").style.userSelect = "default";
    resizeable = false;
  });
}
    #my-table-container {}

#my-table {
  margin: 0;
  padding: 0;
  text-align: left;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

#my-table thead {
  border-top: 2px solid rgb(140 140 140);
  border-left: 2px solid rgb(140 140 140);
}

#my-table th {
  position: relative;
  margin: 0;
  padding: 0;
}

#my-table th:first-child {
  width: 150px;
}

#my-table th .resize-bar {
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: black;
  cursor: col-resize;
}

#my-table tbody td div.cell-container,
#my-table thead th div.cell-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  left: 3px;
  top: 0;
  width: calc(100% - 6px);
}

#my-table thead th{
  min-width: 50px;
}

#my-table thead th,
#my-table tbody td {
  position: relative;
  height: 24px;
  line-height: 24px;
}
    <div id="my-table-container">
  <table id="my-table">
    <thead>
      <tr>
        <th scope="col">
          <div class="cell-container">Full Name</div><span class="resize-bar"><span></th>
                <th scope="col"><div class="cell-container">Type</div><span class="resize-bar"><span></th>
                <th scope="col"><div class="cell-container">Size</div><span class="resize-bar"></span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="cell-container">James Smith</div>
        </td>
        <td>
          <div class="cell-container">20</div>
        </td>
        <td>
          <div class="cell-container">[email protected]</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="cell-container">Jane Doe</div>
        </td>
        <td>
          <div class="cell-container">19</div>
        </td>
        <td>
          <div class="cell-container">[email protected]</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

    • 1

相关问题