Skip to content
网游世界
网游世界

吾生有涯,而知无涯。

  • 首页
  • PHP
    • ThinkPHP
    • FastAdmin
    • webman
  • JavaScript
    • jQuery
    • AdminLTE
  • Free Pascal
  • Java
    • JeeSite
    • 若依
    • ruoyi-vue-pro
  • 其它
    • 操作系统
    • 树莓派
    • 前端
    • Null
  • 关于
网游世界

吾生有涯,而知无涯。

前端表格对齐展示规范

3Vshej, 2023年12月19日 周二2025年8月20日 周三
对齐常见有三种:左、右、居中对齐。

常规字段左对齐

在默认情况下基本都按照左对齐来进行排列,因为大部分表格字段都是非固定的,左对齐能够让整体有一个比较良好的展示效果。

固定短字段居中对齐

居中对齐一般针对固定长度类型的数据,比如我们常见的性别、状态和楼层等。采用居中对齐能够很好的和表头进行对齐,视觉上更舒适。

金融数字右对齐

而右对齐则一般针对金融类,比如价格等数字,因为数字采用右对齐能够更好地进行价格的比较。
在这里要注意,使用数字时最好使用等宽的数字,第一是为了避免因为数字不同的宽度而不太整齐,第二则是为了更好地进行金额等的对比。
比如DIN字体、微软雅黑、思源黑体都属于等宽字体,而我们常见的苹方字体则为非等宽。
标题状态金额
这是第1个标题开始963.12
这是第2个标题结束852.25
这是第3个标题正常741.14
更多参见:
  • 展示B端信息,如何选择对齐方式?

相关文章:

  1. Bootstrap 移动端 nav-tabs 实现横向滑动 bootstrap 移动端开发时,需要实现 tab 页切换,也就是,通过对 nav nav-tabs......
  2. 京华老宋体 汉字爱好者、传播者,网名“特里王”参照1961年北京新华字模厂改刻的老筑地体61-1体的旧书,利用A......
  3. Vue 中载入默认图片 在开发中,当遇到图片未能正确显示时,载入一张默认图片。这里介绍下方法:...
  4. ruoyi-vue-pro 增加详情页面 默认情况下,没有详情页,这时候需要自己动手加一个,这里基于 Descriptions 组件。...
前端 前端表格

文章导航

Previous post
Next post

近期文章

  • 我所知的良好的系统设计(sean goedecke)
  • 安装程序缺少 MSI 文件
  • gitlib 无法重置到上游代码
  • Windows MySQL 备份和 winscp 同步
  • WinRAR 压缩方式

归档

  • 2025 年 8 月
  • 2025 年 7 月
  • 2025 年 6 月
  • 2025 年 5 月
  • 2025 年 4 月
  • 2025 年 3 月
  • 2025 年 2 月
  • 2025 年 1 月
  • 2024 年 12 月
  • 2024 年 11 月
  • 2024 年 10 月
  • 2024 年 9 月
  • 2024 年 8 月
  • 2024 年 7 月
  • 2024 年 6 月
  • 2024 年 5 月
  • 2024 年 4 月
  • 2024 年 3 月
  • 2024 年 2 月
  • 2024 年 1 月
  • 2023 年 12 月
除非特殊说明,本站作品采用知识共享署名 4.0 国际许可协议进行许可。
豫公网安备 41010402002622号 豫ICP备2020029609号-3
©2025 3Vshej