如何实现table表格行列自适应

要实现表格的行列自适应，有以下几种方式：

1. 使用CSS的table-layout属性

可以通过设置table-layout属性为auto来让表格自动调整列宽，而不是按照内容固定列宽。同时，也可以使用width属性来指定表格的总宽度，让表格能够自适应不同的屏幕大小。

例如：

table {
  table-layout: auto;
  width: 100%;
}

2. 使用CSS3的Flexbox布局

Flexbox布局可以轻松实现元素的自适应，包括表格的行列自适应。通过设置display属性为flex，可以将表格元素转换为Flex容器，然后使用flex属性来控制子元素的伸缩性，实现表格的行列自适应。

例如：

table {
  display: flex;
  flex-wrap: wrap;
}
td {
  flex: 1;
}

3. 使用JavaScript动态计算表格宽度

可以使用JavaScript来动态计算表格的宽度和每列的宽度，从而实现表格的自适应。通过遍历表格的每个单元格，获取其内容的宽度，并将最大宽度作为列宽度，然后设置每列的宽度和表格的总宽度，从而实现表格的自适应。

例如：

function adjustTable(table) {
  var row = table.rows[0];
  var cellWidths = [];
  var tableWidth = 0;
  for (var i = 0; i < row.cells.length; i++) {
    var cell = row.cells[i];
    cellWidths.push(cell.offsetWidth);
    tableWidth += cell.offsetWidth;
  }
  for (var i = 0; i < row.cells.length; i++) {
    var cell = row.cells[i];
    cell.style.width = (cellWidths[i] / tableWidth * 100) + '%';
  }
  table.style.width = '100%';
}

以上三种方式都可以实现表格的行列自适应，具体使用哪种方式，取决于具体的需求和实现方式。