Гридвью CSS границы несовместимы - PullRequest
Новая
       13

Гридвью CSS границы несовместимы

2 голосов
/ 08 декабря 2009

Это действительно беспокоит меня. Я использую GridView и хочу отформатировать его таким образом, чтобы границы отображались одинаково во всех браузерах. На данный момент я получаю разные результаты между IE, FF и Chrome. Я не уверен, что я делаю неправильно в своем CSS (я совсем новичок в CSS), но что-то должно быть правильно, так как один из браузеров отображает границы правильно в любое время. CSS для gridview выглядит следующим образом: 

.gridViewData
{
    height:auto;
    width:544px;
    position:relative;

    text-align:center;

     background-color:#7D9EBA;
     border:solid thin black;
     border-right:none 0px black;



}

.gridViewData td 
{
    padding:2px;
    border-top-style:none;
    border-bottom-style:solid;
    border-left-style:solid;
    border-right-style:none;
    border-color:Black;
    border-width:thin;



}

.gridViewData th
{
    height:10px;
    width: 544px;
    position:relative;
    text-align:center;
    border-top-style:dashed;
    border-bottom-style:solid;
    border-left-style:solid;
    border-right-style:none;
    border-color:Black;
    border-width:thin;
    background-color:white;


}

.gridViewData .alt
{
     background-color:Red; 
}

.gridViewData .pgr 
{ 
    background-color:Orange; 
}

Я бы хотел, чтобы стол выглядел как грубая попытка рисовать: D. Заголовок не должен иметь границ между ячейками. 

 ____________________________
|____________________________|
|___|__________|________|____|
|___|__________|________|____|
|___|__________|________|____|

В IE заголовок не имеет верхней границы. В FF это выглядит хорошо, а в Chrome в заголовке есть разделители. Это беспокоило меня некоторое время, так что, надеюсь, кто-то может пролить свет на это.

Спасибо

1 Ответ

3 голосов
/ 08 декабря 2009

Используйте свойства GridView для достижения этой цели вместо применения CSS к сгенерированным элементам таблицы. Например, заголовок можно стилизовать, применив CSS к свойству:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.headerstyle.aspx

EDIT:

Обратите внимание, что декларативный атрибут bordercolor добавляет объявление встроенного стиля, которое применяется только к самой таблице, а не к отдельным ячейкам. Добавление атрибута bordercolor программным способом не использует встроенный стиль, но использует свойство HTML bordercolor, которое браузеры применяют ко ВСЕМ границам внутри таблицы: 

OnRowDataBound="MyGrid_RowDataBound"

protected void MyGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
     foreach (TableCell tc in e.Row.Cells)
     {
         tc.Attributes["style"] = "border-color: #000";
     }
}

Я опубликовал пост в блоге об этом - проверьте комментарий Ли Дюмонда:

http://www.codersbarn.com/post/2009/05/31/Set-Color-of-GridLines-in-Gridview.aspx#comment

...