实现表格中行点击时的渐扩效果！

要实现表格中行点击时的渐扩效果，可以采用以下步骤：

1. 在HTML页面中创建一个表格，并将每一行封装在一个<tr>标签内：

<table>
  <tr>
    <td>行1, 列1</td>
    <td>行1, 列2</td>
  </tr>
  <tr>
    <td>行2, 列1</td>
    <td>行2, 列2</td>
  </tr>
</table>

1. 在CSS样式表中为表格行添加transition属性和transform属性，实现点击时的动画效果。同时，为了让每个行元素在单击时从中心扩展，需要给行元素设置一个初始的scale值为0，并在:active状态下将其缩放到1。

tr {
  transition: all 0.2s ease-in-out;
  transform-origin: center;
  transform: scale(0);
}

tr:active {
  transform: scale(1);
}

1. 客制化样式可以通过添加自定义类名或行内样式指定，利用伪类选择器:hover实现悬停视觉反馈效果。例如，将表格的背景颜色设为灰色，鼠标悬停在行上时变为淡灰色，点击时变为深灰色。

.table {
  background-color: #e0e0e0;
}

tr:hover {
  background-color: #f0f0f0;
}

tr:active {
  background-color: #c0c0c0;
}

以下是两个示例，演示了行点击时的渐扩效果的不同实现方式：

示例1：利用JS实现点击时添加类名

HTML：

<table>
  <tr>
    <td>行1, 列1</td>
    <td>行1, 列2</td>
  </tr>
  <tr>
    <td>行2, 列1</td>
    <td>行2, 列2</td>
  </tr>
</table>

CSS：

tr {
  transition: all 0.2s ease-in-out;
  transform-origin: center;
  transform: scale(0);
}

tr.active {
  transform: scale(1);
}

.table {
  background-color: #e0e0e0;
}

tr:hover {
  background-color: #f0f0f0;
}

JS:

var rows = document.querySelectorAll('tr');
rows.forEach(function(row) {
  row.addEventListener('click', function() {
    rows.forEach(function(r) {
      r.classList.remove('active');
    });
    this.classList.add('active');
  });
});

示例2：利用CSS实现点击时添加伪元素

HTML：

<table>
  <tr>
    <td>行1, 列1</td>
    <td>行1, 列2</td>
  </tr>
  <tr>
    <td>行2, 列1</td>
    <td>行2, 列2</td>
  </tr>
</table>

CSS:

tr {
  position: relative;
  background-color: #e0e0e0;
  transition: all 0.2s ease-in-out;
  transform-origin: center;
  transform: scale(0);
}

tr:active::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(4);
  transition: all 0.3s ease-in-out;
}

tr:hover {
  background-color: #f0f0f0;
}

其中，:active::before选择器添加了一个伪元素，利用绝对定位和圆形的边界半径在行元素中心绘制一个圆形白色面板，并将其初始值缩小为0，点击时，将其缩放至原来大小的四倍。这样就实现了点击时的渐扩效果。