土法列表表格-这回原理我也说不清了

啊 反正就是改了一下列表的css

效果差不多这样

土法列表表格-这回原理我也说不清了 - 图1

原代码(已失效, 建议查看修复后代码)

📎liebiaobiaoge.css

  1. .protyle-wysiwyg *[custom-liebiaobiaoge="1"] .protyle-action{
  2.     display: table-cell;
  3. }
  5. .protyle-wysiwyg *[custom-liebiaobiaoge="1"] ，
  6. .protyle-wysiwyg *[custom-liebiaobiaoge="1"] .list ,
  7. .protyle-wysiwyg *[custom-liebiaobiaoge="1"] .li .list{
  8.     border-style: solid;
  9.     border-width: 0px;
  10.     padding-left: 0px !important;
  11.     padding-right: 0px !important;
  12.     padding-top: 0px !important;
  13.     padding-bottom: 0px !important;
  14.     margin: 0px !important;
  15.     width: 100%;
  16.     height: inherit !important;
  17.     display: table-column-group;
  18.     outline: solid rgba(0, 0, 0, 1) 1px;
  19.     overflow-block: hidden;
  20. }
  21. .protyle-wysiwyg *[custom-liebiaobiaoge="1"] .li{
  22.     font-size: large !important;
  23.     border-style: solid;
  24.     border-width: 0px;
  25.     padding-left: 0px !important;
  26.     padding-right: 0px !important;
  27.     padding-top: 0px !important;
  28.     padding-bottom: 0px !important;
  29.     margin: 0px !important;
  30.     width: 100% !important; 
  31.     min-height: 36px;
  32.     display: -webkit-flex;
  33.     outline: solid rgba(0, 0, 0, 1) 1px;
  34.     overflow-x: auto;
  35. }
  37. .protyle-wysiwyg *[custom-liebiaobiaoge="1"] .p {
  38.     width: min-content;
  39.     min-width: 200px;
  40.     margin-right: 0px;
  41.     margin-left: 0px;
  42.     display: table-cell;
  43. }
  44. .protyle-wysiwyg *[custom-liebiaobiaoge="1"]  .div {
  45.     width: min-content;
  46.     min-width: 20px !important;
  47. }
  48. .protyle-wysiwyg *[custom-liebiaobiaoge="1"] .li::first-line .p{
  49.     width: 100% !important;
  50. }
  51. .protyle-wysiwyg *[custom-liebiaobiaoge="1"] .list:last-child:first-child ~ li .p{
  52.     width: 100% !important;
  53. }
  54. .protyle-wysiwyg *[custom-liebiaobiaoge="1"] .protyle.attr:last-child:nth-child(3) .p{
  55.     width: 100% !important;
  56. }

陈年老物了,我现在也不记得哪些是多余的代码,有兴趣的可以自己修改好加到主题里,custom-liebiaobiaoge=”1”这里是使用了自定义属性筛选,你可以换成自己喜欢的.

修复后代码

感谢 思源笔记二群 (155585856) 的 ZYF 同学的贡献
为一个列表块(无序列表/有序列表/任务列表均可)设置块自定义属性 type: table即可使用

  1. /* --------------------------------------用自定义属性，列表转化为表格------------------------------------------- */
  2. .protyle-wysiwyg *[custom-type="table"] .protyle-action {
  3.     display: table-cell;
  4. }
  6. .protyle-wysiwyg div.list[custom-type="table"] div.list,
  7. .protyle-wysiwyg div.list[custom-type="table"] div.li {
  8.     border: 0;
  9.     padding: 0;
  10.     margin: 0;
  11.     height: 100%;
  12.     outline: 1px solid var(--b3-theme-on-surface);
  13. }
  15. /* 顶层列表块 */
  16. /* .protyle-wysiwyg div.list[custom-type="table"] {} */
  18. /* 嵌套列表块 */
  19. .protyle-wysiwyg div.list[custom-type="table"] div.list {
  20.     width: 100%;
  21. }
  23. /* 列表项 */
  24. .protyle-wysiwyg div.list[custom-type="table"] div.li {
  25.     width: auto;
  26.     display: flex;
  27.     overflow-x: auto;
  28. }
  30. /* 列表项内容 */
  31. .protyle-wysiwyg div.list[custom-type="table"] div[data-node-id]:not(.li, .list) {
  32.     min-width: 128px;
  33.     width: auto;
  34.     text-align: justify;
  35. }
  37. /* 去除辅助线 */
  38. .protyle-wysiwyg div.list[custom-type="table"] div.li>div:before {
  39.     display: none;
  40. }
  42. /* --------------------------------------用自定义属性，列表转化为表格 END------------------------------------------- */