Início / coding / Perguntas / 78531834
Accepted
pileup
Asked: 2024-05-25 16:15:30 +0800 CST

Como permitir o redimensionamento do TD menor que o conteúdo definindo a largura no TH?

  • 772

Fiz uma tabela com colunas redimensionáveis. Estou definindo a largura do thelemento. Mas parece que não me permitirá definir a largura abaixo da largura do arquivo mais longo td.

O que eu quero fazer é permitir que as colunas sejam redimensionadas para um valor mínimo.

O que funcionou para permitir que o conteúdo tdfosse menor que o conteúdo foi set max-width, porém não quero ter um max-width. E se bem me lembro, min-widthnão funciona em tabelas.

Tenho algo a fazer sobre isso? Ou, neste caso, é melhor tentar criar uma tabela usando CSS Grid?

Meu objetivo é permitir o redimensionamento das colunas abaixo do thconteúdo tde e mostrar reticências (com ...)

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 respostas

  1. Best Answer
    1. Tornar .cell-containerabsoluto e td,threlativo posicionado
    2. Defina a altura e a altura da linha detd,th
    3. Mova o intervalo de redimensionamento para fora .cell-container(para que não seja cortado)

    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

relate perguntas