如何获取动态表中特定表数据（td）的宽度和高度

Question

我有两个不同的组件，例如 A 和 B。A 有一些动态数据表值。 B 表也需要显示 B 的表数据以及 A 的表的一些值。组件之间没有任何关系。数据获取部分对我们来说工作正常。

问题是，如果 A 的数据超过两行，就意味着 B 的表出现了 Allingment 问题

谁能帮我求出A的表格数据的高度和宽度。然后我们解决问题。

Answer 1

你尝试过bootstrap的flex布局吗？

<div class="container">
  <div class="row">
     <div class="col">
        <table border="1"> <!-- Table 1 -->
          <tr>
             <th>Company</th>
             <th>Contact</th>
             <th>Country</th>
          </tr>
          <tr>
             <td>Alfreds Futterkiste</td>
             <td>Maria Anders</td>
             <td>Germany</td>
          </tr>
          <tr>
             <td>Alfreds Futterkiste</td>
             <td>Maria Anders</td>
             <td>Germany</td>
          </tr>
          <tr>
             <td>Alfreds Futterkiste</td>
             <td>Maria Anders</td>
             <td>Germany</td>
          </tr>
        </table>
     </div>
     <div class="col d-flex align-items-start">
        <table border="1"> <!-- Table 2 -->
          <tr>
             <th>Company</th>
             <th>Contact</th>
             <th>Country</th>
          </tr>
          <tr>
             <td>Magazzini Alimentari Riuniti</td>
             <td>Giovanni Rovelli</td>
             <td>Italy</td>
          </tr>
        </table>
     </div>
  </div>
</div>

在这里，无论表 1 的内容有多长，表 2 都将保持其容器顶部对齐。

Answer 2

尝试以下方法： 1.添加样式=“overflow-x：auto;”到包含表格的div标签

2.或使用引导类'.table-responsive'

这两个将帮助您使表格响应

Answer 3

由于您上面提到的表A的内容是动态的。您只能在下一个时钟周期内获取其更新的尺寸（高度和宽度）。在这种情况下，您可以使用 setTimeout 在获取更新的维度时延迟一些。尝试下面的代码片段。

private getUpdatedDimensions() {
   setTimeout(
     _ => {
        const containerW = this.tableContainer.nativeElement.offsetWidth;
        const containerH = this.tableContainer.nativeElement.offsetHeight;
        console.log(`Width: ${containerw},  H: ${containerH}`);
     }, 0
   );
}

Answer 4

      functionFn() {
        document.addEventListener('DOMContentLoaded', () => {
          const table = document.getElementById(
            'demo-table-v2'
          ) as HTMLTableElement;
          const headers = table.querySelectorAll(
            'th'
          ) as NodeListOf<HTMLTableCellElement>;
          let startX: number,
            startWidth: number,
            currentColumn: HTMLElement | null = null;
          let isResizing: boolean = false;
    
          function onMouseDown(event: MouseEvent): void {
            if (event.target && (event.target as HTMLElement).tagName === 'TH') {
              currentColumn = event.target as HTMLElement;
              startX = event.clientX;
              startWidth = currentColumn.offsetWidth;
              isResizing = true;
              currentColumn.classList.add('resizing');
            }
          }
    
          function onMouseMove(event: MouseEvent): void {
            if (isResizing && currentColumn) {
              const newWidth = startWidth + (event.clientX - startX);
              currentColumn.style.width = `${newWidth}px`;
            }
          }
    
          function onMouseUp(): void {
            if (isResizing) {
              isResizing = false;
              if (currentColumn) {
                currentColumn.classList.remove('resizing');
                currentColumn = null;
              }
            }
          }
    
          headers.forEach((header) => {
            header.addEventListener('mousedown', onMouseDown);
          });
    
          document.addEventListener('mousemove', onMouseMove);/* id to table tag */
          document.addEventListener('mouseup', onMouseUp);/* add overflow visible if action button dropdown */
        });
      }




table {
    table-layout: fixed;
    width: 100%;
  }
  
  td, th {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    width: 85px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }
  
  th {
    cursor: col-resize;
  }
  
  th.resizing {
    background-color: #ddd; /* Optional: to indicate the column is being resized */
  }