2014-11-14 1 views
1

Я создаю веб-приложение для планирования проектов ASP.net/C#. Похоже, что это:Заполнить фон ячейки gridview asp.net с цветом только на 10% высоты ячейки?

[сс]: http://i59.tinypic.com/sxj23b.jpg

Так что я пытаюсь нажать на ячейку (для начала проекта) и клетки, которые я нажимаю, автоматически будет дата начала. Он должен указать название проекта, а затем я хотел бы выделить верхнюю часть ячейки зеленым цветом bg, чтобы указать начало проекта «x».

Я додумался, и я не согласен с идеей, что ячейка полностью заполнена, потому что это может затруднить ее чтение и выглядеть очень аккуратно только с 10% ячейки.

+1

http://stackoverflow.com/questions/12021233/css-to-set-the-background-color-for-just-a-percentage-of-the-width- a-table-ro Это должно привести вас к правильному пути. –

+1

Вы всегда можете просто полностью заполнить ячейку, а затем изменить цвет текста, который легко читается. Или сделайте его смелым. –

ответ

1

, если вы используете таблицы в этом представлении и хотите, чтобы цвет был целым рядом, чем PLS попробовать.

Я добавил активный класс в строку таблицы и создал этот активный класс tds border top color.

, и если вы хотите применить только к определенной ячейке, щелкните 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(){ 
 
\t $('.table_class tr').click(function() { 
 
    \t \t $('.table_class tr').removeClass('border_fill'); \t 
 
     $(this).addClass('border_fill'); 
 

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

 
</body> 
 
</html>

+0

Это работает, когда я использовал его css. Пример @DavidLaughlin предоставил трюк. Спасибо за ваш вклад. – tshoemake

Смежные вопросы