css制作环形表格

使用CSS制作环形表格

环形表格是一种视觉上呈现为圆形的表格布局，通常用于展示数据关系或对比。以下是几种实现方法：

使用CSS Grid和Transform

通过CSS Grid布局结合旋转变换实现环形排列：

<div class="circular-table">
  <div class="item">1</div>
  <div class="item">2</div>
  <!-- 更多项目 -->
</div>

.circular-table {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

.item {
  position: absolute;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  transform-origin: 150px 150px;
}

/* 通过计算旋转角度排列项目 */
.item:nth-child(1) { transform: rotate(0deg) translateX(100px); }
.item:nth-child(2) { transform: rotate(45deg) translateX(100px); }
/* 继续添加其他项目 */

使用Flexbox和伪元素

结合Flexbox和伪元素创建环形效果：

.circular-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  position: relative;
}

.table-cell {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 使用三角函数计算位置 */
.table-cell:nth-child(1) {
  top: calc(50% - 40px - 150px * sin(0deg));
  left: calc(50% - 40px + 150px * cos(0deg));
}

使用CSS变量和计算

动态计算位置实现响应式环形表格：

:root {
  --radius: 200px;
  --item-count: 8;
}

.circular-grid {
  position: relative;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
}

.grid-item {
  position: absolute;
  width: 50px;
  height: 50px;
  --angle: calc(360deg / var(--item-count) * var(--index));
  transform: 
    rotate(var(--angle)) 
    translateX(var(--radius)) 
    rotate(calc(-1 * var(--angle)));
}

添加交互效果

为环形表格添加悬停动画：

.table-cell {
  transition: transform 0.3s, box-shadow 0.3s;
}

.table-cell:hover {
  transform: scale(1.1) translateZ(10px);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  z-index: 10;
}

响应式调整

针对不同屏幕尺寸调整环形大小：

@media (max-width: 768px) {
  .circular-table {
    width: 200px;
    height: 200px;
  }

  .item {
    transform-origin: 100px 100px;
  }
}

这些方法可以根据实际需求组合使用，创建不同风格的环形表格布局。关键点在于精确计算每个表格单元的位置和旋转角度，保持整体环形结构的平衡性。