对后台添加css样式 html+ 设置边框样式

最新推荐文章于 2025-08-08 14:53:48 发布

原创最新推荐文章于 2025-08-08 14:53:48 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

IT technology 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种在后台动态生成带样式的HTML表格的方法，通过遍历数据集填充表格内容，并使用内联样式设置边框。同时，详细展示了如何在前端使用CSS美化表格，包括设置背景颜色、交替行颜色、滚动条等，以提升用户体验。

在后台实现如下样式

关于后台控制器上对添加的table添加样式：

在后台渲染样式为：html+的形式

               string html = "";
			html += "<table style='width:100%'><thead>";
			html += "<tr><th style='border:1px solid black;'>代表处</th><th style='border:1px solid black;'>省份</th><th style='border:1px solid black;'>地市</th><th  style='border:1px solid black;'>代理商</th>";

			foreach (var ititle in barcodetitle)
			{
				html += "<th  style='border:1px solid black;'>" +
					ititle.B_item_code +
				 "</th>";
			}

			html += "</tr></thead><tbody>";


			//html += "<tr><th style='border:1px solid black;'>代表处</th><th style='border:1px solid black;'>省份</th><th style='border:1px solid black;'>城市</th><th style='border:1px solid black;'>铺货商</th><th style='border:1px solid black;'>产品分类1</th><th>产品分类2</th><th style='border:1px solid black;'>产品分类3</th><th style='border:1px solid black;'>产品分类4</th><th style='border:1px solid black;'>准确率</th><th style='border:1px solid black;'>预测量</th><th style='border:1px solid black;'>销售量</th><th style='border:1px solid black;'>准确率</th></tr>";
			foreach (var item in sales)
			{
				html += "<tr>";
				html += "<td style='border:1px solid black;'>" + item.regionname + "</td><td style='border:1px solid black;'>" + item.PROVINCENAME + "</td><td style='border:1px solid black;'>" + item.cityname + "</td><td style='border:1px solid black;'>" + item.COMPANYNAME + "</td>";
				string sal = item.COMPANYNAME;
				//foreach (var phs in barcode.Where(o => o.DITRIBUTION_NAMESum == sal).ToList())
				//{
				foreach (var title in barcodetitle)
				{
					var tab = barcode.Where(o => o.DITRIBUTION_NAMESum == sal && o.B_item_code == title.B_item_code&&o.REGIONNAME==item.regionname&&item.PROVINCENAME.Contains(o.PROVINCE_NAME)).FirstOrDefault();  //&& o.PROVINCENAME==item.PROVINCENAME

					if (tab == null)
					{
						html += "<td style='border:1px solid black;'></td>";
					}
					else
					{
						double val = Convert.ToDouble(tab.counta) / Convert.ToDouble(tab.countsum);
						html += "<td style='border:1px solid black;'>" + val.ToString("P") + "</td>";
					}
				}
				//}
				html += "</tr>";
			}
			html += "</tbody></table>";

主要应该注意的是：在你自己写的table 后加一个：<thead> </thead> 。再加个 <tbody></tbody>

css放在前台即可 :

<style type="text/css">
        #QueryDriteriaDiv1 table {
            margin-top: 15px;
            border-collapse: collapse;
            border: 1px solid #aaa;
            width: 100%;
        }

            #QueryDriteriaDiv1 table th {
                vertical-align: baseline;
                padding: 5px 15px 5px 6px;
                background-color: #3F3F3F;
                text-align: left;
                color: #fff;
            }

            #QueryDriteriaDiv1 table td {
                vertical-align: text-top;
                padding: 6px 15px 6px 6px;
            }

            #QueryDriteriaDiv1 table tr:nth-child(odd) {
                background-color: #F5F5F5;
            }

            #QueryDriteriaDiv1 table tr:nth-child(even) {
                background-color: lightgray;
            }

            #QueryDriteriaDiv1 table thead {
                width: calc(100%-1em)
            }

            #QueryDriteriaDiv1 table tbody {
                display: block;
                height: 700px;
                overflow-y: scroll;
                overflow-x: scroll;
            }

            #QueryDriteriaDiv1 table thead, tbody tr {
                display: table;
                width: 100%;
                table-layout: fixed;
            }
    </style>