css拼接表格，达到冻结列的效果

最新推荐文章于 2024-05-14 16:52:58 发布
最新推荐文章于 2024-05-14 16:52:58 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： # Web前端 文章标签： 固定表格形成滚动条 拼接表格 列固定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zorro_jin/article/details/82529450
版权

一、背景

       项目中有一个表单填报，表单基本可分为左右两边，左边是一些基本评分规则（数量不固定），右边是一些被评分人（数量也不固定）。现在的需求就是，当被评分人数过多时，右边表格需要自动形成滚动条，可滚动评分，而此时左边评分规则不动。

       当每一个评分因素评完分之后，需要自动计算该评分项的小计总分以及该被评分人的总计得分，且此处表格存在合并单元格的样式。 

二、解决方案

       由于此处固定部分需要合并单元格，并且每一评分项都需要小计，所以在尝试Boostrap-Table、LayUI -Table无果之后，就选择了手动将表单分为两个table表格来写，最终再拼接在一起。

       注：兼容IE11(其它版本没测)、Google、Firefox

三、页面代码

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>拼接表格示例</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.js"></script>
	<!-- 拼接表格的样式 -->
    <style type="text/css"> 
		.table td {
			font-size: 14px;
			text-align: center;
			vertical-align: middle!important;
		}
		.table thead tr th {
			font-size: 16px;
			/* 内容水平居中 */
			text-align: center;
			/* 内容垂直居中 */
			vertical-align: middle!important;
		}
		.error{
			text-align: left;
			color: #d9534f;
			float: left;
		}
		.box .right .table .form_pingfen{
			width: 80%;
			display: inline-block;
		}
		
		.box {
			position: relative;
			margin: 20px;
		}
		/* 让table的内部布局固定大小,才能使td内容溢出后显示省略号生效 */
		.box div table {
			table-layout: fixed;
		}
		/* 左边固定项表格的宽度 */
		.box .left {
			width: 40%;
			/* border: 1px solid #dcdcdc; */
		}
		/* 内容溢出生成滚动条；移动右边table，使其与左边table连接起来  */
		/* 右边活动项表格的宽度 */
		.box .right{
			width:60%;
			overflow:auto;
			 /* 不需要垂直滚动条 */
			overflow-y:hidden;
			display:block; 
			position: absolute;
			left: 40%;
			top: 0;
			border-right: 1px solid #dcdcdc;
			/* border: 1px solid #dcdcdc; */
		}
		.box .right table{
			min-width:100%;
			margin-bottom: 0;
		}
		.box .right table tr th, .box .right table tr td{
			width: 220px;
			min-width:220px;
		}
		/* 使td内容溢出时以省略号显示  */
		.box .table tr td, .box .table tr th{
			/* 不换行 */
			word-break:keep-all;
			/* 不换行 */
			white-space:nowrap;
			overflow:hidden;
			text-overflow: ellipsis;
		}
		.box .table .td_pingfen {
			height: 60px;
			min-height: 60px;
			max-height: 60px;
		}
		.box .table .td_jisuan {
			height: 52px;
			min-height: 52px;
			max-height: 52px;
		}
		.box .table .td_beizhu {
			height: 150px;
			min-height: 150px;
			max-height: 150px;
		}
		.box div .table tbody .color_pingfen > td {
			background-color: #f3e9d8;
		}
		.box div .table tbody .color_xiaoji > td {
			background-color: #c1e5f7;
		}
		.box div .table tbody .color_zongji > td {
			background-color: #efc5c5;
		}            
	</style>
	<script type="text/javascript">
		/* 根据浏览器大小设定右边table的div的宽度 */
		$(function(){
		   /*  $(window).resize(function(){
				$("#right").css("max-width", $(window).width() -  $(window).width() * 0.40 - 60);
			}).resize(); */
		})
		
		/** 高亮鼠标悬浮行 */
		var tr_index;
		function overColor_pingfen($this){
                        tr_index = $this.rowIndex;    //rowIndex是相对于table来计算下标的，index是相对于所处同一个父元素下来计算
			// tr_index = $($this).index() + 1;
			$(".left table tr:eq("+tr_index+")").addClass("color_pingfen");
			$(".right table tr:eq("+tr_index+")").addClass("color_pingfen");
			// $($this).addClass("color_pingfen");
		}
		function outColor_pingfen($this){
			$(".left table tr:eq("+tr_index+")").removeClass("color_pingfen");
			$(".right table tr:eq("+tr_index+")").removeClass("color_pingfen");
			// $($this).removeClass("color_pingfen");
		}
		function overColor_xiaoji($this){
                        tr_index = $this.rowIndex;
			// tr_index = $($this).index() + 1;
			$(".left table tr:eq("+tr_index+")").addClass("color_xiaoji");
			$(".right table tr:eq("+tr_index+")").addClass("color_xiaoji");
			// $($this).addClass("color_xiaoji");
		}
		function outColor_xiaoji($this){
			$(".left table tr:eq("+tr_index+")").removeClass("color_xiaoji");
			$(".right table tr:eq("+tr_index+")").removeClass("color_xiaoji");
			// $($this).removeClass("color_xiaoji");
		}
		function overColor_zongji($this){
                        tr_index = $this.rowIndex;
			// tr_index = $($this).index() + 1;
			$(".left table tr:eq("+tr_index+")").addClass("color_zongji");
			$(".right table tr:eq("+tr_index+")").addClass("color_zongji");
			// $($this).addClass("color_zongji");
		}
		function outColor_zongji($this){
			$(".left table tr:eq("+tr_index+")").removeClass("color_zongji");
			$(".right table tr:eq("+tr_index+")").removeClass("color_zongji");
			// $($this).removeClass("color_zongji");
		}
	</script>
  </head>
  <body>
    <div class="box">
      <!-- 左边固定项表格 -->
      <div id="left" class="left">
        <table id="contentTable" class="table table-striped table-bordered">
          <colgroup>
            <col style="width:30%" />
            <col style="width:30%" />
            <col style="width:40%" />
          </colgroup>
          <thead>
            <tr class="success">
              <th class="td_pingfen">评分项</th>
              <th class="td_pingfen">评分因素</th>
              <th class="td_pingfen">评分规则</th>
            </tr>
          </thead>
          <tbody>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td rowspan="2" class="td_pingfen">评分项-1</td>
              <td class="td_pingfen">评分因素-1.1</td>
              <td class="td_pingfen">评分规则-1.1</td>
            </tr>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">评分因素-1.2</td>
              <td class="td_pingfen">评分规则-1.2</td>
            </tr>
            <tr class="info" style="font-weight: bold;" onmouseover="overColor_xiaoji(this)" onmouseout="outColor_xiaoji(this)">
              <td class="td_jisuan">小计</td>
              <td colspan="2" class="td_jisuan">得分小计</td>
            </tr>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td rowspan="3" class="td_pingfen">评分项-2</td>
              <td class="td_pingfen">评分因素-2.1</td>
              <td class="td_pingfen">评分规则-2.1</td>
            </tr>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">评分因素-2.2</td>
              <td class="td_pingfen">评分规则-2.2</td>
            </tr>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">评分因素-2.3</td>
              <td class="td_pingfen">评分规则-2.3</td>
            </tr>
            <tr class="info" style="font-weight: bold;" onmouseover="overColor_xiaoji(this)" onmouseout="outColor_xiaoji(this)">
              <td class="td_jisuan">小计</td>
              <td colspan="2" class="td_jisuan">得分小计</td>
            </tr>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td rowspan="2">评分项-3</td>
              <td class="td_pingfen">评分因素-3.1</td>
              <td class="td_pingfen">评分规则-3.1</td>
            </tr>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">评分因素-3.2</td>
              <td class="td_pingfen">评分规则-3.2</td>
            </tr>
            <tr class="info" style="font-weight: bold;" onmouseover="overColor_xiaoji(this)" onmouseout="outColor_xiaoji(this)">
              <td class="td_jisuan">小计</td>
              <td colspan="2" class="td_jisuan">得分小计</td>
            </tr>
            <tr>
              <td colspan="3"></td>
            </tr>
            <tr class="danger" style="font-weight: bold;" onmouseover="overColor_zongji(this)" onmouseout="outColor_zongji(this)">
              <td class="td_jisuan">总计</td>
              <td colspan="2" class="td_jisuan">综合得分</td>
            </tr>
            <tr>
              <td colspan="3"></td>
            </tr>
            <tr style="font-weight: bold;" onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td colspan="3" class="td_beizhu">备注</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 右边活动项表格 -->
      <div id="right" class="tab-content right">
        <table id="contentTable" class="table table-striped table-bordered">
          <thead>
            <tr class="success">
              <th class="td_pingfen" title="被评价人-1">被评价人-1</th>
              <th class="td_pingfen" title="被评价人-2">被评价人-2</th>
              <th class="td_pingfen" title="被评价人-3">被评价人-3</th>
              <th class="td_pingfen" title="被评价人-4">被评价人-4</th>
            </tr>
          </thead>
          <tbody>
            <!-- 评分项-1 -->
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <!-- 评分因素-1  小计 -->
            <tr class="info" style="font-weight: bold;" onmouseover="overColor_xiaoji(this)" onmouseout="outColor_xiaoji(this)">
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <!-- 评分项-2 -->
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <!-- 评分项-2 小计 -->
            <tr class="info" style="font-weight: bold;" onmouseover="overColor_xiaoji(this)" onmouseout="outColor_xiaoji(this)">
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <!-- 评分项-3 -->
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <tr onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_pingfen">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <!-- 评分项-3 小计 -->
            <tr class="info" style="font-weight: bold;" onmouseover="overColor_xiaoji(this)" onmouseout="outColor_xiaoji(this)">
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <tr>
              <td colspan="4"></td>
            </tr>
            <!-- 总计 -->
            <tr class="danger" onmouseover="overColor_zongji(this)" onmouseout="outColor_zongji(this)">
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
              <td class="td_jisuan">
                <input htmlescape="false" max="100" min="0" class="form-control form_pingfen required number" />
              </td>
            </tr>
            <tr>
              <td colspan="4"></td>
            </tr>
            <!-- 备注 -->
            <tr style="font-weight: bold;" onmouseover="overColor_pingfen(this)" onmouseout="outColor_pingfen(this)">
              <td colspan="4" class="td_beizhu">
                <textarea rows="5" id="beizhu" class="required" style="width: 97%;"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

四、效果图

       注：当被评价人数超出表格范围时，右边表格会自动形成滚动条 。

五、小计、总计的计算说明 

       由于这里没有使用真实数据，计算方法也不好直接在样板中展示，在此仅说明下思路：

       1、在数据中每个评分项（ruleId）、被评分人(personId)都有唯一的ID标识；

       2、小计：在每一个打分输入框（input）都添加ruleId_personId这个类，在此输入框绑定onchange事件，参数就为ruleId_personId，在事件中使用类选择器获取该被评分人该评分项的所有输入框，遍历相加即可；

       注：计算时需注意数字长度和精度的控制！

       3、总计：在每一个小计输入框都添加personId这个类，在此输入框绑定onchange事件，参数就为personId，在事件中使用类选择器获取该被评分人该评分项的所有输入框，遍历相加即可；

/** 小计统计 */
function xiaoji(xjId){
    var count = 0;
    var regExp = new RegExp("\\d+");
    $("." + xjId).each(function(){
        if(regExp.test($(this).val())){
            count += Number($(this).val());
        }
    });
    $("#" + xjId).val(count.toFixed(2));
    var zjId = xjId.substring(0, xjId.indexOf("_"));
    zongji(zjId);
}
/** 总计计统计 */
function zongji(zjId){
    var count = 0;
    var regExp = new RegExp("\\d+");
    $("." + zjId).each(function(){
        if(regExp.test($(this).val())){
            count += Number($(this).val());
        }
    });
    if (count == 0) {
        $("#" + zjId).val('');
    }else{
        $("#" + zjId).val(count.toFixed(2));
    }
}

附-示例代码打包：

示例代码打包下载

 

周末未至
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table的行列冻结、行冻结、列冻结
06-13
基于jquery 实现 对已有table表冻结行列、冻结行、冻结列，兼容主流浏览器。代码中有详细的注释说明，有使用案例。实际使用中如果发现有缺陷，欢迎留言提建议，或联系
jQuery实现冻结表格行和列
10-24
首先，冻结表格行和列的基本思路是通过复制原始表格的部分内容并创建新的div元素来承载这些内容，然后通过CSS样式控制这些div的位置和层级，使其在页面滚动时保持在可视区域内。具体实现分为以下几个步骤： 1. **...
纯 css 实现 table 冻结首列
qq_38865642的博客
03-28 575
表格过大在移动端显示不完整时，需要滚动条滑动，接下来使用纯 css 来实现 table 冻结首列，更好的浏览表格内容。
CSS 基础教程：表格（一）
最新发布
m0_65012566的博客
05-14 364
表格是一个HTML元素，用于以带有行和列的结构化格式显示数据。表格使用HTML中的<table>标签创建，并且可以使用CSS属性进行样式设置。本章讨论如何使用CSS设置HTML表格的不同属性。首先看看下面的示例，它演示了一个简单的HTML表格：</</</</</</</</</</</</</</</</</</上述示例中的表格是数据的简单显示，可以使用CSS进行样式设置。widthheighttext-alignborder让我们看看如何在以下各节中使用这些属性的示例。
css 设置冻结表格头,纯CSS冻结表头
weixin_34640051的博客
08-03 557
css/* Colors *//* Bidirectional Table */div.frozen-table {width: 100%;min-height: 150px;overflow: scroll;margin: 0 auto;/* Remove the below 3 properties on your Website (Test-Purpose) */width: 800px;h...
table，colspan导致子td设置宽度无效的问题
炮孩子的博客
04-10 5334
当table中出现跨列的表头时，一般会在table加上属性style="table-layout:fixed;"，来达到自适应宽度。 <table style="table-layout:fixed;"> <tr id="parent"> <td colspan="2" style="width:100px;">基本信息</td...
CSS通用样式3——表格
qq_66198247的博客
11-08 5931
上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持.table-dark样式，适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。Bootstrap为表格提供了多种状态的样式类，这些状态类的主要作用是为表格中的行或单元格设置不同的背景颜色。样式，可以将表格中的每个单元格增加边框样式。
表格列表偶数列、奇数列的CSS样式示例
09-25
本示例探讨了如何使用CSS为表格列表实现特定的样式，包括偶数列、奇数列、鼠标悬停时的样式以及标题列的样式。这对于创建有吸引力且易于阅读的数据展示非常有用。 首先，我们看HTML部分。这里有一个`<table>`元素，...
CSS如何实现表头冻结效果
09-25
表头冻结想必大家已知道是什么样的效果了吧，在某些场合还是比较实用的，在本文主要为大家介绍下使用css如何实现表头冻结，感兴趣的朋友可以了解下
漂亮的CSS立体表格效果特效代码
03-20
标题中的“漂亮的CSS立体表格效果特效代码”是指利用CSS（层叠样式表）技术来创建具有立体感的表格效果。CSS是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言，它允许我们将样式与结构分离，...
通过css动画实现一个表格滚动轮播效果
12-28
css动画的一个应用，与此前的css走马灯同样的内容。只是一次不同的应用，具体实现如下 序号 姓名 年龄 性别 专业 </ul>
HTML 实现行、列冻结功能
05-23
HTML 实现行、列冻结功能,使用了javascript、jquery 的方式实现了类似excel冻结的功能。
js冻结表格行列实例
06-05
JS 冻结表格: 冻结表格的示例代码 支持主流浏览器,IE也OK. HTML文件直接运行
HTML页面table表格固定行和列
01-04
当表格的内容很多，表格很长、很高的时候，为了查阅方便，常常要有固定表的表头和左侧侧栏的需求。
css冻结table
12-27
指定宽度下支持冻结，只需要加对应的样式class接
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 8万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
CSS中的表格(一)
xvzhengyang的博客
03-05 6009
如何使用HTML来完成一个表格? &lt;table&gt;元素专门负责标记表格数据. &lt;tr&gt;每个tr元素构成表格中的一行 &lt;th&gt;每个th元素分别是某一列的表头;浏览器默认的会用粗体来表示表头. &lt;td&gt;每个td元素包含表格中的一个单元格,每个单元格分别构成一个单独的列;包含一个表格数...
css设置表格样式
qq_40135955的博客
04-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置表格的边框</title> <style type="text/css"> .t{ border: 1px gray solid; bo...
用CSS实现四行五列细线表格效果
03-29
``` <div class="cell">1 <div class="cell">2 <div class="cell">3 <div class="cell">4 <div class="cell">5 ...[四行五列细线表格效果](https://i.loli.net/2021/05/31/ITKvfaQd7W8LptG.png)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值