2015-10-27 2 views
0

Я работаю над интрасети, в частности на странице Report, которая может быть распечатана, отображая сетку с количеством часов, отработанных сотрудником в течение выбранного месяца. Вот скриншот того, что он выглядит как прямо сейчас:<table> элементы стиля, не показывающие

enter image description here

Как вы можете сказать, там не так много разделения и четкость при отображении информации.

Вот часть View, которая отображает все это:

<table> 

    <tr> 
     <th>Date</th> 
     <th>Activité</th> 
    </tr> 
<% 

    int total = 0; 
    int i = 0; 
    foreach (var jour in ViewBag.ListDaysOfMonth) 
    { 
     if (ViewBag.ReportInts.Length > i) 
     { 
      total += decimal.Parse(ViewBag.ReportInts[i]); 

      if (jour.Contains("Mo") && i != 0) 
      { 
      %> 

      <tr> 
      <td colspan="2">&nbsp; 
      </td> 
      </tr> 

      <% 
      } 
      %> 

      <tr> 
      <td width="150"><%= jour%>&nbsp;</td> 
      <td><%= ViewBag.ReportInts[i++]%></td> 
      </tr> 
<% 
     } 
     else 
     { 
%> 
      <tr> 
      <td align="center" colspan="2">Aucune activité.</td> 
      </tr> 
<% 
     } 
    } 
%> 
    <tr> 
     <th>Total</th> 
     <th><%= total %></th> 
    </tr>    
</table> 

По какой-то причине, я не могу сделать так, чтобы информация отображается в виде сетки (без каких-либо плагинов, просто CSS).

table 
{ 
    border-collapse: separate; 
    border-spacing: 2px; 
    margin-top: 0.75em; 
    border: 2px; 
} 

th 
{ 
    font-size: 0.85em; 
    text-align: left; 
    padding-left: 0; 
} 

Я довольно новичок в технологии, как я могу отображать ее чисто и отдельно?

EDIT:

Здесь более или менее то, что я хочу, чтобы иметь в качестве конечного дисплея (без цвета фона)

enter image description here

EDIT2:

Я получил очень близко к тому, что я хотел, заботясь об этом стиле таблиц непосредственно в коде (я знаю, что это не очень хорошая идея). При необходимости добавив style="border:1px solid;", отобразится сетка.

+0

Что вы имеете в виду _displayed как grid_ и _cleanly and separate_? Как вы хотите, чтобы это выглядело? –

+0

Я добавил фотографию –

+1

Затем просто добавьте границы и т. Д. В ваш css - например. 'td {border: solid gray 1px '}' –

ответ

0

Вы указали только ширину рамки в вашем файле CSS. Вы также должны указать атрибут border-style, чтобы отобразить его.

Например:

border: 1px solid black; 

цвет (черный в моем примере) не является обязательным, но вы можете указать его вместе с другими свойствами, используя сокращенную.

См. Также this MDN article о задании границ в CSS.