如何在asp.net中在行之间添加分隔符

本文关键字：之间 添加 分隔符 net asp | 更新日期: 2023-09-27 17:58:08

这是我的代码，在这段代码中，我看到一个充满数据的表，但没有显示分隔符，就像我想要分隔符b/w行和列一样。如何在asp.net html表中添加分隔符。如何在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>

如何在asp.net中在行之间添加分隔符

这是css示例。参见演示

如果您重新定义的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/

我通过在我的行中添加border: 1px solid #C1C1C1;来解决，即

style="background-color:#EFF3FB;border: 1px solid #C1C1C1;"

您可以使用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/享受。

相关文章：