用颜色填充gridview asp.net单元格的背景仅10％的单元格高度？答案

【问题标题】：Fill background of gridview asp.net cell with color for only 10% height of the cell?用颜色填充gridview asp.net单元格的背景仅10％的单元格高度？
【发布时间】：2014-11-14 04:23:16
【问题描述】：

我正在制作一个 ASP.net/C# 自定义项目规划 Web 应用程序。它看起来像这样：

我正在尝试单击一个单元格（启动一个项目），我单击的单元格将自动成为开始日期。它应该列出项目名称，然后我想用绿色 bg 颜色突出显示单元格的顶部，以指示其项目“x”的开始。

我开始思考，我不同意将单元格完全填满的想法，因为它可能难以阅读，而且只有 10% 的单元格看起来更整洁。

【问题讨论】：

stackoverflow.com/questions/12021233/… 这应该会让你走上正确的道路
您总是可以完全填充单元格，然后将文本颜色更改为易于阅读。或者加粗。

标签： c# css asp.net gridview

【解决方案1】：

如果您在此视图中使用表格并希望为整行着色，请尝试此操作。

我在表格行中添加了一个活动类，并设置了活动类 tds 边框顶部颜色的样式。

如果您只想在点击的特定单元格上应用，请告知。

<!DOCTYPE html>
<html>
<body>
<style>
td {
border: 1px solid #d4d4d4;
padding: 5px;
padding-top: 7px;
padding-bottom: 7px;
vertical-align: top;
}
.border_fill td{border-top: 7px solid #CFCFD2;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
	 $('.table_class tr').click( function() {
 		$('.table_class tr').removeClass('border_fill');	
        $(this).addClass('border_fill');

	});
});
</script>
<table style="width:100%" class="table_class">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

【讨论】：

这在我使用他的 css 时有效。 @DavidLaughlin 提供的示例起到了作用。感谢您的意见。