Table的CSS美化样式

以下是一些基本的CSS样式，可以用来美化HTML中的Table：

1. 设置表格边框样式

table {
  border-collapse: collapse;
  border: 1px solid #ddd;
}

2. 设置表格单元格的边框样式

td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

3. 设置表头单元格的背景色和文字颜色

th {
  background-color: #f2f2f2;
  color: #444;
}

4. 设置表格的宽度和居中

table {
  width: 100%;
  margin: auto;
}

5. 设置表格中的奇偶行背景色

tr:nth-child(even) {
  background-color: #f2f2f2;
}

可以根据实际需要进行调整和修改，以达到更好的美化效果。

相关问题

html中table美化,漂亮的css table样式

可以通过CSS来美化HTML中的table，以下是一些常见的方法：

1. 使用表格样式类：可以在CSS中定义一些表格样式类，然后在table标签中应用该样式类。例如：

.table-style {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.table-style th, .table-style td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

在HTML中使用：

<table class="table-style">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

2. 使用CSS伪类：可以使用CSS伪类来实现一些特殊效果，例如：

.table-style2 {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.table-style2 th, .table-style2 td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.table-style2 tr:hover {
  background-color: #f5f5f5;
}

.table-style2 th {
  background-color: #f2f2f2;
  color: #666;
}

在HTML中使用：

<table class="table-style2">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

以上两种方法只是其中的两种，具体可根据需求自行调整CSS样式。

请利用css美化上述代码的样式

以下是对上述代码进行样式美化的示例：

<template>
  <view class="container">
    <view class="table">
      <view class="row" v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <view class="cell" v-for="(cell, cellIndex) in row" :key="cellIndex" @click="showFullText(cell)">
          {{ cell }}
        </view>
      </view>
    </view>
    <view class="floating-box" v-show="showFullTextFlag">
      <view class="text">{{ fullText }}</view>
      <view class="close" @click="closeFullText">关闭</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        ["Cell 1", "Cell 2 with long text", "Cell 3"],
        ["Cell 4", "Cell 5", "Cell 6"],
        // more rows...
      ],
      showFullTextFlag: false,
      fullText: "",
    };
  },
  methods: {
    showFullText(text) {
      if (text.length > 10) {  // 假设超过10个字符才需要显示完整文字
        this.fullText = text;
        this.showFullTextFlag = true;
      }
    },
    closeFullText() {
      this.showFullTextFlag = false;
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}

.table {
  border-collapse: collapse;
}

.row {
  display: flex;
}

.cell {
  flex: 1;
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.cell:hover {
  background-color: #f2f2f2;
}

.floating-box {
  position: fixed;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  z-index: 9999;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.text {
  overflow-y: auto;
}

.close {
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
}

.close:hover {
  color: red;
}
</style>

在上述代码中，我添加了一些CSS样式以美化表格和悬浮框的外观。你可以根据需要进行调整和修改，以满足你的具体要求。注意，我在单元格样式`.cell`中添加了`cursor: pointer;`，以在鼠标悬停时显示手型光标，提醒用户可以点击查看完整文字。另外，在关闭按钮样式`.close`中添加了`cursor: pointer;`，使其在鼠标悬停时显示手型光标，并且添加了`:hover`伪类来改变鼠标悬停时的样式。

希望这样的样式美化可以满足你的需求，如有任何问题，请随时提问。