如何调整固定宽度表格中的列大小

Question

我有一个固定宽度容器中的表格，并且该表格能够隐藏/显示列。当我显示列时，表格的宽度超过容器的宽度并溢出，触发水平滚动，当我隐藏列时，表格的宽度返回到其正常宽度并且水平滚动停止。这是我们想要的并且按预期工作。

但是当我尝试调整列大小时，列拒绝移动。我希望能够增加一列或多列的宽度，这反过来会导致水平滚动启动。

感谢您的帮助。

表格 HTML

                <div class='taskmgr-table-cntnr'>
                  <table class='taskmgr-table'  #tskMgrTable>
                    <thead>
                      <tr >             
                        <th  columnResize  id="th-1">
                            <span class="tskmgr-th-span-name"> Name </span>
                        </th>
                        <th  columnResize id="th-2">               
                            <span class="tskmgr-th-span-name"> Type </span>
                        </th>
                        <th columnResize  id="th-3">
                            <span class="tskmgr-th-span-name"> Status </span>
                        </th>
                        <th  columnResize id="th-4">               
                            <span class="tskmgr-th-span-name"> PID </span>
                        </th>
                        <th  columnResize id="th-5">               
                            <span class="tskmgr-th-span-name"> Process name </span>
                        </th>
                        <th >               
                            <span class="tskmgr-th-span-name"> Power usage</span>
                        </th>
                    </thead>
                    <tbody>
                      <tr *ngFor='let process of processes;'  id="trElmnt-{{this.processId}}">
                          <td > {{ process.getProcessName}} </td>
                          <td >{{ process.getType}}</td>
                          <td> {{ process.getProcessStatus}} </td>
                          <td >{{ process.getProcessId}}</td>
                          <td >{{ process.getProcessName}}</td>
                          <td > {{ process.getPowerUsage}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

表格CSS

.taskmgr-table-cntnr {
  width: 680px;
  overflow-x: scroll;
  border-top:  none;
}

/* Custom styles for the table */
.taskmgr-table {
  font-family: Arial, sans-serif;
  margin: 1px 0; 
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
}

.taskmgr-table th {
  background-color: #ffffff; /* Header background color */
  color: #333; /* Header text color */
  padding: 0; /* Header cell padding */
  text-align: left; /* Header text alignment */
  font-weight:lighter;  /* Header text bold */
  height: 40px;
  min-width: 80px;
  border: 1px solid #ccc;   /* Cell border */
  border-top: none;
  vertical-align: middle;
}

.taskmgr-table td {
  padding: 3px 5px; 
  min-width: 80px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 12px;
  font-weight:lighter; 
  text-align: left; 
  border: 1px solid #ccc;
  border-top:none; border-bottom:none;
}

/* Add this to your component's CSS or global styles */
th[columnResize], td[columnResize] {
  position: relative;
}

th[columnResize]::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px; /* Adjust the handle width */
  height: 100%;
  cursor: col-resize;
  background-color: #f0f0f0; /* Handle background color */
}

调整大小指令

// column-resize.directive.ts

import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({
  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: '[columnResize]'
})
export class ColumnResizeDirective {
  private isResizing = false;
  private table: HTMLElement | null = null; // Initialize table as null

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    event.preventDefault();
    this.isResizing = true;
  
    this.renderer.addClass(this.el.nativeElement, 'resizing');
    this.renderer.addClass(document.body, 'resizing');

    this.table = this.findParentTable(this.el.nativeElement);

    if (this.table) {
      const onMouseMove = (moveEvent: MouseEvent) => {
        if (this.isResizing) {
  
          let width =  0;
          let right = 0;
           const thElmnt = this.el.nativeElement.closest("th")?.getBoundingClientRect();
           width = thElmnt.width;
           right = thElmnt.right;

           const newWidth = width + moveEvent.clientX - right;
           console.log('newWidth:',newWidth);
           this.renderer.setStyle(this.el.nativeElement, 'width', `${newWidth}px`);
        }
      };

      const onMouseUp = () => {
        this.isResizing = false;
        this.renderer.removeClass(this.el.nativeElement, 'resizing');
        this.renderer.removeClass(document.body, 'resizing');
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      };

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    }
  }

  private findParentTable(element: HTMLElement): HTMLElement | null {
    while (element) {
      if (element.tagName === 'TABLE') {
        return element;
      }
      if (element?.parentElement) element = element.parentElement;
    }
    return null;
  }
}

Answer 1

onMouseDown 中缺少更新：

在 onMouseDown 函数中，您正在计算新宽度，但实际上并未更新表格布局。您需要修改表格的宽度或列的宽度以反映更改。

以下是更新代码的方法：

TypeScript
onMouseDown(event: MouseEvent) {
  event.preventDefault();
  this.isResizing = true;

  this.renderer.addClass(this.el.nativeElement, 'resizing');
  this.renderer.addClass(document.body, 'resizing');

  this.table = this.findParentTable(this.el.nativeElement);

  if (this.table) {
    const onMouseMove = (moveEvent: MouseEvent) => {
      if (this.isResizing) {
        const thElmnt = this.el.nativeElement.closest("th")?.getBoundingClientRect();
        const newWidth = thElmnt.width + moveEvent.clientX - thElmnt.right;

        // Update the table or column width here
        this.renderer.setStyle(this.table, 'width', `${this.table!.offsetWidth + newWidth}px`); // Update table width
        // OR
        this.renderer.setStyle(this.el.nativeElement, 'width', `${newWidth}px`); // Update column width

        // Adjust horizontal scroll if needed (optional)
        // ...
      }
    };

    // ... rest of the code for mouseup and event listeners
  }
}

选择根据所有列的累积变化更新整个表格宽度，或直接更新单个列宽度。