使用DIV+CSS也可以制作简单好看的表格,附实例和代码。

使用DIV+CSS也可以制作简单好看的表格,附实例和代码。

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2024-03-30 01:04:13
文章简介

使用DIV+CSS,不仅能制作网页布局,还能打造简约美观的表格。通过巧妙运用样式和布局,实现表格的自定义设计。下面附上实例和代码,助你轻松上手,打造独特风格的表格。

  • 正文开始
  • 相关阅读
  • 推荐作品

先上个图,不同于HTML得TABLE标签制作,使用DIV+CSS也是可以制作好看的表格的哦

使用DIV+CSS也可以制作简单好看的表格,附实例和代码。

CSS代码如下:

.main {
  height: auto;
  border: 1px solid #ccc;
  border-bottom: none;
  margin-bottom: 10px;}.line {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ccc;}.row {
  border-right: 1px solid #ccc;
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;}.row:last-of-type{
  border-right: none;}.row-item{
  border-bottom: 1px solid #ccc;}.row-item:last-of-type{
  border-bottom: none;}

HTML代码如下:

    <div class="main">
      <div class="line">
        乙方      </div>
      <div class="line">
        <div class="row">
          收费        </div>
        <div class="row">
          <div class="row-item">总计</div>
          <div class="row-item">支付日</div>
        </div>
        <div class="row">
          <div class="row-item">10元</div>
          <div class="row-item">15号</div>
        </div>
      </div>
    </div>


分享一个简单大方的公告提示HTML页面
« 上一篇 2023年12月18日
点击按钮先显示倒计时再显示自定义连接或者文字得代码
下一篇 » 2024年03月30日
  • 帝国CMS统计多个数据表今日更新总数代码
    40阅读0条评论0个赞
    帝国CMS统计多表今日更新总数代码教程:通过SQL查询结合帝国CMS函数,汇总多个数据表中今日更新的记录总数。步骤包括编写SQL联合查询语句,利用`DATE()`函数筛选今日数据,结合帝国CMS的数据库操作函数执行查询,并输出结果。此教程教你高效获取多表今日更新概况,优化管理效率。
  • 自动识别图片颜色代码,PHP版本
    68阅读0条评论1个赞
    自动识别图片颜色代码PHP教程:学习如何用PHP脚本自动提取图片中的颜色代码。无需手动选取,脚本自动分析图片像素,输出主要颜色或特定颜色代码。适合网页设计师和开发者,快速获取配色方案。通过简单步骤,加载图片、运行脚本,即可获取颜色信息。提升工作效率,让颜色识别自动化。本教程简洁明了,适合初学者快速上手。
  • 帝国cms7.5无刷新 Ajax 点击加载更多列表信息源代码
    730阅读2条评论10个赞
    帝国CMS 7.5 Ajax无刷新加载,高效实现点击加载更多列表信息,精简源码仅展示核心功能,优化用户体验,提升网页加载效率。
  • 响应式平滑切换jQuery手风琴代码
    78阅读0条评论2个赞
    响应式平滑切换jQuery手风琴代码,实现网页元素优雅折叠与展开。该代码兼容性强,适应不同屏幕尺寸,提供流畅的用户体验。简洁高效,轻松打造动态交互效果,提升网页吸引力。
  • 点击按钮先显示倒计时再显示自定义连接或者文字得代码
    56阅读0条评论3个赞
    点击按钮后,先触发倒计时,待倒计时结束后,展示自定义链接或文字。此代码实现了用户交互与动态内容的完美结合,既提升了用户体验,又增加了页面的灵活性和可定制性。

如本文对您有帮助,就请墨鱼抽根烟吧!