小程序实现简易的table表格

最新推荐文章于 2025-04-14 16:30:31 发布

原创最新推荐文章于 2025-04-14 16:30:31 发布 · 849 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #css #css3

react 同时被 2 个专栏收录

12 篇文章

订阅专栏

小程序

2 篇文章

订阅专栏

这篇博客展示了如何使用HTML和CSS来构建一个简单的表格布局。通过定义样式类`table`，`table-tr`，`table-th`和`table-td`，作者创建了一个具有边框、居中对齐和单元格间边框的表格。表格包含两行，第一行为表头，第二行展示数据。CSS部分详细定义了表格元素的样式，包括宽度、高度、内边距、背景色和边框。

效果

在这里插入图片描述

HTML

<View className={styles['table']}>
     <View className={styles['table-tr']}>
           <View className={styles['table-th']}>名称</View>
           <View className={styles['table-th']}>有/无</View>
     </View>
     <View className={styles['table-tr']}>
     		// 这里可以map需求的数据
           <View className={styles['table-td']}>内容1</View>
           <View className={styles['table-td']}>内容2</View>
     </View>
</View>

CSS

 .table {
      border: 1px solid #e8e8e8;
      width: 650px;
      .table-tr {
        display: flex;
        width: 100%;
        justify-content: center;
        height: 85px;
        align-items: center;
        .table-th {
          width: 50%;
          justify-content: center;
          background: #f9fafc;
          color: #323332;
          display: flex;
          height: 85px;
          align-items: center;
          border-bottom: 1px solid #e8e8e8;
          border-right: 1px solid #e8e8e8;
        }
        .table-td {
          width: 50%;
          height: 85px;
          line-height: 85px;
          text-align: center;
          border-bottom: 1px solid #e8e8e8;
          border-right: 1px solid #e8e8e8;
        }
      }
    }