CODEWITHSUNDEEP
c#cssasp.netgridview
tshoemake
tshoemake

Reputation: 1351

Fill background of gridview asp.net cell with color for only 10% height of the cell?

I'm making a ASP.net/C# custom project planning web application. It looks like this:

enter image description here

I'm trying to click a cell (to start a project) and the cell which I click, will automatically be the start date. It should list the project name and then I'd like to highlight the top of the cell with green bg color to indicate its the start of project "x".

I got to thinking and I'm not ok with the idea of the cell being fully filled cause it could make it hard to read, and look much neater with only 10% of the cell.

Upvotes: 1

Views: 647

Answers (1)

wasim abbas
wasim abbas

Reputation: 71

if you are using tables in this view and want to color in whole row than pls try this.

i have added an active class to table row and styled that active class tds border top color.

and if you want to apply only on specific cell clicked pls inform .

<!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>

Upvotes: 1

Related Questions