table——单列宽度设置
设置 Table 宽度 单列
2023-09-27 14:29:10 时间
参考:https://blog.csdn.net/lunhui1994_/article/details/81120579
效果:
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>test</title> <link rel="stylesheet" href="css/amazeui.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <style> .table-items { table-layout: fixed; // td的宽度固定,不随内容变化 } .table-items>tbody>tr>td { // 文字超出显示省略号 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <body> <div class="am-cf"> <table class="am-table am-table-hover table-items"> <thead> <tr> <th style="width:25%">序号</th> <th style="width:40%">姓</th> <th style="width:35%">名</th> </tr> </thead> <tbody id="table-body"></tbody> </table> </div> <script type="text/javascript"> var dataList = [{ id: 1, first_name: 'honorificabilitudinitatibushonorificabilitudinitatibus', second_name: 'antidisestablishmentarianismantidisestablishmentarianism' }, { id: 2, first_name: 'floccinaucinihilipipificationfloccinaucinihilipipification', second_name: 'supercalifragilisticexpiadocioussupercalifragilisticexpiadocious' }, { id: 3, first_name: 'hepaticocholecystostcholecystntenterostomyhepaticocholecystostcholecystntenterostomy', second_name: 'pneumonoultramicyoscpicailicovolcanoconiosispneumonoultramicyoscpicailicovolcanoconiosis ' }]; $(function() { var str = ''; for (var i = 0; i < dataList.length; i++) { str = "<tr><td title=" + dataList[i].id + ">" + dataList[i].id + "</td>" + "<td title=" + dataList[i].first_name + ">" + dataList[i].first_name + "</td>" + "<td title=" + dataList[i].second_name + ">" + dataList[i].second_name + "</td>" + "</tr>"; $('#table-body').append(str); } }) </script> </body> </html>
td里的title属性是鼠标悬停上方时显示内容。
相关文章
- mysql中参数low_case_table_name的使用?不同参数值的设置有什么影响?
- 【JAVA】Eclipse设置代码的字体!
- React Native商城项目实战07 - 设置“More”界面导航条
- 如何在Webstorm/Phpstorm中设置连接FTP,并快速进行文件比较,上传下载,同步等操作
- 设置主键的问题
- VUE-003-前端表格数据展示时,设置单元格(el-table-column)保留空格和换行
- html如何设置表格单元格内容垂直居中?
- 最最实用的android studio设置教程
- Linux设置静态IP
- 2.34 OrCAD中关于格点的操作是在哪里设置的?
- table 》 tr 设置样式无效? table tr 这样设置才行,why?
- php开启mbstring扩展并设置支持utf-8编码
- layui中的table根据数据返回的数组设置不同的状态