【Hexo】美化表格 |
您所在的位置：网站首页 › markdown设置表格宽度 › 【Hexo】美化表格 |
|
通过jupyter notebook导出的markdown文件中的表格过于丑陋，遂尝试对生成的表格内容进行美化。 步骤 创建自定义的CSS文件在themes/next/source/css/main.styl中添加一行内容。 1@import "_custom/custom"然后在themes/next/source/css目录下创建_custom文件夹。再进入该文件夹创建名为custom.styl的文件， 用它来配置自己需要的CSS样式。 基本样式 123456789101112131415table { width: 100%; /*表格宽度*/ max-width: 65em; /*表格最大宽度，避免表格过宽*/ border: 1px solid #dedede; /*表格外边框设置*/ margin: 15px auto; /*外边距*/ border-collapse: collapse; /*使用单一线条的边框*/ empty-cells: show; /*单元格无内容依旧绘制边框*/}table th,table td { height: 25px; /*统一每一行的默认高度*/ font-size: 10px; /*行内字符大小*/ border: 1px solid #dedede; /*内部边框样式*/ padding: 0 10px; /*内边距*/} 表头样式 123456table th { font-size: 10px; /*表头字符大小*/ font-weight: bold; /*加粗*/ text-align: center !important; /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/ background: rgba(158,188,226,0.2); /*背景色*/} 示例 open high low close volume amount date code 2020-11-16 000001 17.08 17.43 16.90 17.37 759856.0 1.308190e+09 000002 29.39 29.50 29.00 29.20 516576.0 1.509810e+09 000004 31.15 31.46 30.11 30.61 72456.0 2.223127e+08 000005 2.68 2.70 2.65 2.69 64372.0 1.725762e+07 000006 5.66 5.74 5.62 5.72 98253.0 5.592563e+07 000007 9.42 9.42 9.18 9.20 22567.0 2.094628e+07 000008 2.72 2.74 2.70 2.73 171930.0 4.678304e+07 000009 7.71 7.88 7.66 7.82 320180.0 2.492149e+08 000010 4.19 4.27 4.10 4.24 71661.0 3.004320e+07 000011 13.76 14.40 13.58 14.39 105639.0 1.489735e+08参考： Hexo下表格的美化和优化 完美解决：Hexo Next主题本地可预览CSS，但部署到网站CSS失效问题！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |