在后台实现如下样式
关于后台控制器上对 添加的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>