请问是否有CSS能支持表格宽度带上滚动条而不是挤压表格宽度显示？

疑问解答
1

请问是否有CSS能支持表格宽度带上滚动条而不是挤压表格宽度显示？

2

可能有些主题, 直接就是这么做的

对于其他主题, 可以加类似下面的 css snippet, 但也许会给主题添乱, 需要自己测试

.markdown-source-view div.cm-embed-block.cm-table-widget {
    overflow-x: auto;
}
.markdown-source-view div.cm-embed-block.cm-table-widget > div > table {
    width: max-content !important;
}
.markdown-reading-view .markdown-preview-view.markdown-rendered table {
    width: max-content !important;
}
3 个赞
3

谢谢大佬，这个带上滚动条了，感谢！！！

4

你好，我想问一下，这个宽度现在就是内容的宽度，能设置为内容的50%（或某个比例）宽为单元格宽度吗？或者能否设定一个固定值。谢谢

5

天呐大佬太强了，移动端也能生效，完美适配我的Anu主题，大佬有没有能让代码块也支持滚动条横滑的css呀

6

有没有能让代码块也支持滚动条横滑的css呀

这我实在不会呀, 我也跟大家一样都在摸索

如果只在 “阅读视图里给代码块加滚动条”, 其实还是有方案的, 见 【已解决】代码块添加左右滑动栏 - 疑问解答 的讨论, 大家列出了许多办法包括

  • css 片段
  • 利用插件例如 Code Styler / Codeblock Customizer
  • 一些主题 Blue Topaz 的 Style Settings 也带这个设置

但想在实时阅览视图, 也做个 “跟随在代码块下面的滚动条”, 不好办
我理解其原因是, 此时每行都是单独 html 元素, 组成代码块的 “头 ```js” / “具体内容” / “尾 ```” 并没打包在统一的 div 里

一个妥协办法是手动把代码 “包在一个块” 里

> [!note]
> ```js
> await sleep(100);
> new Notice('dv refresh'); app.commands.executeCommandById("dataview: dataview-force-refresh-views"); 
> ```

以上写法可以让这几行代码打包在一个 html 元素, 然后增加 css 片段

.markdown-source-view .cm-callout .callout-content pre {
    overflow-x: auto;
    width: 100% !important;
}
.markdown-source-view .cm-callout .callout-content pre code {
    width: max-content !important;
}

效果是:

image
image916×281 14.4 KB

多写一个 callout 显然麻烦, 看自己权衡了

7

你好, 回复有点晚了… 试了下大概是这样, 可以控制每列的单元格具体多宽

.markdown-source-view div.cm-embed-block.cm-table-widget {
    overflow-x: auto;
}
.markdown-source-view div.cm-embed-block.cm-table-widget > div > table {
    width: max-content !important;
}

.markdown-source-view div.cm-embed-block.cm-table-widget > div > table tr td:first-child {
    width: 100px;
}
.markdown-source-view div.cm-embed-block.cm-table-widget > div > table tr td:nth-child(2) {
    width: 200px;
}
.markdown-source-view div.cm-embed-block.cm-table-widget > div > table tr td:nth-child(4) {
    width: 300px;
}


.markdown-reading-view .markdown-preview-view.markdown-rendered table {
    width: max-content !important;
}

.markdown-reading-view .markdown-preview-view.markdown-rendered table tr td:first-child {
    width: 100px;
}
.markdown-reading-view .markdown-preview-view.markdown-rendered table tr td:nth-child(2) {
    width: 200px;
}
.markdown-reading-view .markdown-preview-view.markdown-rendered table tr td:nth-child(4) {
    width: 300px;
}
8

1000103855
10001038551080×443 126 KB

手机端dataview可以全宽表格，请问一下，我想把文字行，也全宽，怎么写css代码啊。
网上我找的代码全都是电脑用的，在手机上不好使。

9

请问有没有办法手动调整dataview表格结果的列宽？
另外，如果列的内容比较长的话（比如链接，或者其它长内容），能否让它不要在dv的结果表格中显示完整。