比较好看的Table样式

 #mytable {  
    padding: 0;
    margin: 0;  
    border-collapse:collapse;
}

td {
    border: 1px solid #C1DAD7;  
    background: #fff;
    font-size:11px;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}

td.alt {
    background: #F5FAFA;
    color: #797268;
}



 <asp:Repeater runat="server" ID="rptJobList">
                        <ItemTemplate>
                            <table width="750" id="mytable" cellspacing="0">
                                <tr>
                                    <td align="right" class="alt">招聘职位:</td>
                                    <td><%#Eval("post") %></td>
                                    <td align="right" class="alt">学历要求:</td>
                                    <td> <%#Eval("education") %></td>
                                </tr>
                                <tr>
                                   <td align="right" class="alt">性别要求:</td>
                                   <td><%#Eval("sex") %></td>
                                   <td align="right" class="alt">待遇:</td>
                                   <td><%#Eval("salary") %></td>
                                </tr>
                                <tr>
                                    <td align="right" class="alt">联系人:</td>
                                    <td><%#Eval("contact") %></td>
                                    <td align="right" class="alt">联系电话:</td>
                                    <td><%#Eval("phone") %></td>
                                </tr>
                                <tr>
                                   <td align="right" class="alt">信息有效期:</td>
                                   <td><%#Eval("expiredDate") %></td>
                                   <td align="right" class="alt">发布日期:</td>
                                   <td><%#Eval("addDate","{0:d}") %></td>
                                </tr>
                                <tr>
                                  <td align="right" class="alt"><font color="#003399">其他要求:</font></td>
                                  <td colspan="3"><%#Eval("other") %></td>
                                </tr>
                            </table>                          
                            <br />
                        </ItemTemplate>
                    </asp:Repeater>

### el-table 美观样式方案 为了使 `el-table` 更加美观,可以采用多种 CSS 技巧来增强表格的视觉效果。下面提供一种具体的实现方式。 #### 自定义条纹背景色 通过自定义奇数行和偶数行的颜色,可以使表格更易于阅读并提升美感: ```css /* 奇数行样式 */ .el-table--striped .el-table__body tr:nth-child(odd) td { background-color: #f0f9eb !important; } /* 偶数行样式 */ .el-table--striped .el-table__body tr:nth-child(even) td { background-color: #e1f3d8 !important; } ``` 此配置提供了柔和对比度高的绿色调配色方案[^2]。 #### 调整字体颜色与大小 为了让数据更加清晰可见,适当调整文字颜色以及增大字号是一个不错的选择: ```css /* 字体颜色及大小设置 */ .el-table th, .el-table tr { font-size: 14px; color: #333; } ``` 这使得整个表格的文字显示更为舒适。 #### 添加悬停效果 当鼠标移动到某一行上时改变其背景色,增加交互感: ```css /* 鼠标悬停时的效果 */ .el-table tbody tr:hover>td { background-color: #ecf5ff; } ``` 这种动态反馈能有效提高用户体验。 #### 边框优化 去除默认边框或更改边框样式可以让表格看起来不那么生硬: ```css /* 移除单元格之间的内边距 */ .el-table::before { height: 0; } /* 修改外层边框线宽 */ .el-table, .el-table__expanded-cell{ border: none; } /* 单元格间无间隙 */ .cell { padding-left: 0; padding-right: 0; } ``` 这些改动有助于创建一个简洁明了的设计风格。 --- 下面是应用上述样式的部分效果图展示(请注意实际项目中可能因环境差异而有所不同): | 列名 | 数据 | | --- | ---- | | A | a | | B | b | 该表格采用了淡雅绿白相间的底色搭配深灰色字迹,在保持良好可读性的前提下增强了整体美观程度。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值