如何将Vue表格行转为卡片式布局？border-radius无效解决

你遇到的border-radius不生效的问题，根源是border-collapse: collapse这个属性——它会让表格的单元格边框完全合并，导致<tr>的圆角样式被忽略。下面给你两种可行的方案：

方案一：调整表格CSS实现卡片行 #

保留table结构，修改CSS就能实现卡片效果：

table {
  width: 100%;
  margin: 0;
  padding: 0;
  /* 去掉collapse，改用separate让边框独立 */
  border-collapse: separate;
  border-spacing: 0 12px; /* 行之间留间距，模拟卡片间隙 */
  border: none; /* 去掉原有的table边框 */
}

table tr {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 25px;
}

table th, table td {
  padding: 15px 10px; /* 增大内边距，让卡片更饱满 */
  text-align: center;
  border: none; /* 去掉单元格边框 */
}

table th {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  background: #f8f8f8; /* 表头加背景区分 */
}

/* 给表头行加圆角 */
table thead tr {
  border-radius: 25px;
  overflow: hidden; /* 确保表头圆角生效 */
}

注意：因为border-collapse: separate，要给thead的tr加overflow: hidden才能让表头的圆角正常显示，行间距靠border-spacing控制。

方案二：改用Div布局实现纯卡片式（推荐） #

表格本身是为结构化数据设计的，卡片式布局用div+grid会更灵活，视觉效果也更好：

修改后的Vue代码： #

<div v-if="items.length >0" class="card-list">
  <!-- 表头 -->
  <div class="card-header">
    <div class="card-item">{{$t('date')}}</div>
    <div class="card-item">{{$t('description')}}</div>
    <div class="card-item">{{$t('previousBalance')}}</div>
    <div class="card-item">{{$t('debit')}}</div>
    <div class="card-item">{{$t('credit')}}</div>
    <div class="card-item">{{$t('balance')}}</div>
  </div>
  <!-- 数据行 -->
  <div class="card-row" v-for="(item) in items" :key="item">
    <div class="card-item">{{item.txDate}}</div>
    <div class="card-item">{{item.txDesc}}</div>
    <div class="card-item">{{item.txBalBefore}}</div>
    <div class="card-item">{{item.txAmount <=0 ? item.txAmount : '0.00'}}</div>
    <div class="card-item">{{item.txAmount >0 ? item.txAmount : '0.00'}}</div>
    <div class="card-item">{{item.txBalAfter}}</div>
  </div>
</div>

对应的CSS： #

.card-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 卡片之间的间隙 */
}

.card-header {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6列均分宽度 */
  background: #f8f8f8;
  border-radius: 25px;
  padding: 15px 0;
  border: 2px solid #eee;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: #fff;
  border: 2px solid #eee;
  border-radius: 25px;
  padding: 15px 0;
  align-items: center;
}

.card-item {
  text-align: center;
  padding: 0 10px;
}

.card-header .card-item {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

这种方式完全脱离表格限制，圆角、间距、样式都能轻松控制，排版也更整洁，完全符合你要的卡片式效果。

内容的提问来源于stack exchange，提问作者Meow