平面设计做画册用网站,泰州seo平台,农业建设信息网站,商标注册类别45类明细我们先来看一看某银行的账户信息表格 我们自己也可以实现类似的效果
效果图: 大家可以看到#xff0c;其实效果差不多
接下来看看我们实现的代码
源码#xff1a;
!DOCTYPE html
html langzhheadmeta charsetUTF-8其实效果差不多
接下来看看我们实现的代码
源码
!DOCTYPE html
html langzhheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title模拟银行/titlestyle* {margin: 0;padding: 0;color: #3f3f3f;}.container {padding-left: 10px !important;padding-right: 10px !important;}table {border: 1px solid #dedede;display: table;box-sizing: border-box;text-indent: initial;border-spacing: 2px;border-collapse: collapse;width: 898px;height: 80px;}tr {height: 40px;width: 10%;border: none;background: #dddddd;font-size: 14px;color: #3f3f3f;font-weight: normal;text-align: center;}th{ padding-right: 36px;width: 9%;height: 40px;border: none;}tbody td{background-color: #fff;}tbody td{font: 14px/1.5 微软雅黑,Arial,Helvetica,Tahoma,sans-serif;border-collapse: collapse;border-spacing: 0;padding: 0;font-size: 14px;color: #3f3f3f;text-align: center;height: 40px;border: none; }tbody .tar{text-align: right !important;}.table_th_money {padding-right: 36px;width: 9%;}.font_money {font-family: Arial;font-weight: bold;color: #d62f2f;}a{text-decoration: none;}a:link,a:visited{color: blue;}/style/headbodydiv classcontainertable classone_lines_table width100%theadtrth开户日期/thth类型/thth币种/thth classtar table_th_money账户余额/thth classtar table_th_money可用余额/thth操作/th/tr/theadtbodytrtdscriptformatDate(20230925)/script2023-09-25/tdtd 活期储蓄 /tdtd人民币/tdtd classtar span classfont_money table_th_moneyscriptformatAmt(629.28)/script629.28/span /tdtd classtar span classfont_money table_th_moneyscriptformatAmt(629.28)/script629.28/span /tdtd a href# classdetail pr_5明细/a/td/tr/tbody/table/div/body
/html
建议和优化 表格宽度: 你设置了table的width为898px但这可能不是最灵活的解决方案特别是当考虑到不同屏幕尺寸的响应式设计时。一个更好的做法可能是使用百分比或max-width来限制表格的最大宽度同时允许它在较小的屏幕上缩小。 行和列的宽度: 你为每个tr元素设置了width: 10%;但实际上tr元素不控制列的宽度而是th和td元素控制列的宽度。对于tr元素你其实只需要设置height。 使用border-collapse: 你已经设置了border-collapse: collapse;在table元素上这是正确的因为它会合并相邻的单元格边框。 内边距和外边距: .container中的padding-left和padding-right被设置为10px这是可以的但请确保这符合你的整体布局和设计需求。 字体设置: 你已经在tbody td中设置了字体相关的样式但.font_money类也定义了字体样式。确保这些样式不会相互冲突并且你确实需要这些额外的类。 JavaScript函数: 你需要确保formatDate和formatAmt这两个JavaScript函数已经在页面的某个地方被正确定义。例如你可能需要在script标签内或在外部JavaScript文件中定义它们。 表格标题的对齐: 你已经使用.tar类来将某些列的文本对齐到右侧这是通过text-align: right;实现的。这是正确的做法。 响应式设计: 考虑添加媒体查询Media Queries来优化不同屏幕尺寸下的表格布局。例如在小屏幕上你可能希望表格的列堆叠起来而不是水平排列。 代码组织: 为了提高代码的可读性和可维护性建议将CSS规则分组到更具体的类或ID下而不是使用通配符*。此外考虑将CSS代码移到单独的.css文件中并链接到HTML文件。 语义化HTML: 你的HTML结构看起来是合理的但请确保你使用的是语义化的HTML元素。例如thead, tbody, th, 和 td 是正确的表格元素。
