html table 圆角,巧用css代码打造圆角table

要给 HTML table 添加圆角，可以使用 CSS 的 border-radius 属性来实现。具体的代码如下：

table {
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
}

th,
td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

在上面的代码中，我们使用 border-collapse 属性来合并边框，使用 border-radius 属性来添加圆角效果，并且使用 overflow 属性来隐藏圆角之外的内容。同时，我们还设置了 th 和 td 的样式，包括内边距、文本居中和边框样式。

你可以根据需要调整 border-radius 的值来改变圆角的大小。另外，如果你想要更复杂的表格样式，可以使用 CSS 中的伪类和伪元素来实现。

相关问题

elementplus table 设置圆角边框

Element Plus 是基于 Vue.js 的一套简洁、高效的 UI 组件库，它提供了丰富的表格组件 `el-table`。如果你想在 Element Plus 的表格 (`el-table`) 中设置圆角边框，你可以通过 CSS 样式来实现。以下是一个基本的示例：

<template>
  <el-table :data="tableData" style="box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), border-radius: 4px;">
    <!-- ... 表格列和内容 -->
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
const tableData = ref([{ /* ... 表格数据 */ }]);
</script>

在这个例子中，`box-shadow` 属性添加了轻微的阴影效果，`border-radius` 设置了所有四个角落的圆角，值为 `4px` 是一个常见的选择，你可以根据需要调整这个数值。

如果你只想对某些特定的边角设置圆角，比如只对表头或某些行设置，可以使用伪类（如 `:hover`, `:focus` 或 `.custom-class`）结合 `border-radius`。

el-table边框圆角

el-table边框圆角可以通过添加相应的CSS样式实现。根据提供的引用内容，可以使用以下样式来设置el-table的边框圆角：

.radius-table {
&:deep(.el-table) {
border-radius: 4px;
}
}

这样设置后，el-table的边框将具有4px的圆角效果。