Как добавить разделитель между строками в asp.net

0

Вот мой код, в этом я вижу таблицу, заполненную данными, но никаких разделителей не видно, как я хочу, чтобы строки и столбцы разделителя были в силе. Как добавить разделитель в таблицу html asp.net. Как обновить файл css, чтобы получить вид разделителя

  <table class="tableStyle" id="Table1">
    <thead><tr><th id="Th1" style="background-color:#507CD1;width:150px;font-weight:bold;color:White"><div>Number</div></th>
    <th id="Th2" style="background-color:#507CD1;width:150px;font-weight:bold;color:White">Type</th><th id="Th3" style="background-color:#507CD1;width:150px;font-weight:bold;color:White">Name</th>
    </tr></thead>
    <%
        for(int i=0 ;i<10;i++)
        {
            String id = i.ToString();

            %>

        <tr><td headers="Th1" style="background-color:#EFF3FB;">Hello world
</td><td headers="Th2" style="background-color:#EFF3FB;">Hello world</td>
<td headers="Th3" style="background-color:#EFF3FB;"></td></tr>


        <%} 
    %>

    </table>
  • 0
    Действительно ли нужен разделитель между рядами? Вы не можете справиться с этим css design?
  • 0
    Можете ли вы сказать, как это сделать в CSS, я не понимаю, идея
Показать ещё 1 комментарий
Теги:
asp.net-mvc

3 ответа

1

Вот пример css. СМОТРЕТЬ ДЕМО

Если ваш redered HTML следуют.

<table>
    <thead>
        <tr>
            <th>Number</th>
            <th>Type</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
    </tbody>
</table>

CSS

table
{
border-collapse:collapse;
}
table, th, td
{
    border: 1px solid black;
    background-color:#EFF3FB;
}
table thead th {
   background-color:#507CD1;width:150px;font-weight:bold;color:White
}

http://jsfiddle.net/E8W2F/

Поделиться
0

Я решил добавить border: 1px solid #C1C1C1; в моих рядах, т.е.

style="background-color:#EFF3FB;border: 1px solid #C1C1C1;"
Поделиться
0

Вы можете использовать HTML и CSS для стилизации таблиц

Вот какой код (HTML и CSS могут быть хорошо отформатированы, но это всего лишь пример кода)

HTML и CSS-код:

<style>
.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } 
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.datagrid table td, .datagrid table th { padding: 3px 10px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 4px solid #A8A8A8; } 
.datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #00496B; border-left: 4px solid #E1EEF4;font-size: 12px;border-bottom: 2px solid #141BF4;font-weight: normal; }
.datagrid table tbody .alt td { background: #E1EEF4; color: #00496B; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }
.datagrid table tfoot td div { border-top: 1px solid #006699;background: #E1EEF4;} .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div{ padding: 2px; }
.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }
.datagrid table tfoot  li { display: inline; }
.datagrid table tfoot li a { text-decoration: none; display: inline-block;  padding: 2px 8px; margin: 1px;color: #FFFFFF;border: 1px solid #006699;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; }.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none;border-color: #006699; color: #FFFFFF; background: none; background-color:#00557F;}div.dhtmlx_window_active, div.dhx_modal_cover_dv { position: fixed !important; }
</style>

<div id="all" class="datagrid" style="margin-top: 33px;">
        <table>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="4">
                    <div id="no-paging" style="display: none;">
                        &nbsp;
                    </div>
                    <div id="paging">
                        <ul>
                            <li>
                                <a href="#"><span>Previous</span></a>
                            </li>
                            <li>
                                <a href="#" class="active"><span>1</span></a>
                            </li>
                            <li>
                                <a href="#"><span>2</span></a>
                            </li>
                            <li>
                                <a href="#"><span>3</span></a>
                            </li>
                            <li>
                                <a href="#"><span>4</span></a>
                            </li>
                            <li>
                                <a href="#"><span>5</span></a>
                            </li>
                            <li>
                                <a href="#"><span>Next</span></a>
                            </li>
                        </ul>
                    </div></td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Row 1</td>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                </tr>

                <tr class="alt">
                    <td>Row 1</td>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                </tr>
                <tr>
                    <td>Row 1</td>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                </tr>
                <tr class="alt">
                    <td>Row 1</td>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                </tr>
                <tr>
                    <td>Row 1</td>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                </tr>
            </tbody>
        </table>
</div>

Еще один совет: есть веб-сайт, который визуально и легко генерирует стили CSS для таблиц. Перейдите на сайт http://tablestyler.com/ и наслаждайтесь.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню