教你两招如何在notebook中同时展示你的Python内容

前言

jupyter notebook 中我们无须写 print 即可把最后的表达式内容自动显示：

不过，每个执行单元格只能输出最后的内容：

1. 你知道怎么在 jupyter notebook 中一次输出2个表格？
2. 怎么可以把多个表格横向排列？
3. 怎么可以指定每行排列n个表格？

今天就来教你怎么做到

同时输出多个内容

这个技巧网络上到处可见：

• 设置 InteractiveShell.ast_node_interactivity = "all" 即可

没啥好说的，记住就行。我是每次都记不住，都需要搜索一下

但是，上图可以看出来，2个表格上下排列很奇怪，左右排列会更适合

用 css 改变排列方向

以前我们就说过，jupyter notebook 上的内容都是 html。按 F12 ，通过浏览器开发者工具，可以查看输出内容的结构：

• 一个单元格的容器 div 的 class 名字叫 "output"，里面的每组输出的容器 class 名叫 "output_area"
• 查看表格，你会发现 pandas 的 dataframe 输出 class 名叫 "dataframe"

因此我们可以用一些方法使用 css 轻易改变样式：

• 我们需要使用 IPython.display 中的 HTML 往页面中加入 css
• 行3：css 选择器，用来定位标签，.output 表示 class 名叫 "output" 的标签
• 行4：改变他的 flex 布局方向为横向(row) 即可

现在看看效果：

• 不必重新执行，页面的布局会立即刷新

有时候你可能同时输出多个表格，此时你可能希望每行展示指定内容数量更合适

布局细节

flex 布局是现代 css 流行布局，他可以轻易设置布局细节：

• 行5：让 flex 容器允许换行。此时当他里面的元素宽度总和超过他的宽度时，就会换行
• 行11：让里面的元素的宽度为父容器的一半宽度，所以只要放满2个表格，宽度就放满了
• 其他的样式只是点缀，比如加个边框和鼠标滑过效果

这里不展开讲解里面的 css 代码。

你可能觉得这编码挺复杂的，实际上比起 python 要简单多了。

以下是编写 css 过程的视频：

由于全程有智能提示，加上 css 完全声明方式的写法，过程非常流畅舒服。

当前页面一旦执行了以上代码，整个页面都受到影响。

现在看看效果：

你学会了没有？

记得点赞，转发！谢谢支持！

推荐阅读：

1. pandas输出的表格竟然可以动起来?教你华而不实的python
2. python 方法太多了，怎么记住？在 JupyterNotebook中这几招很有用
3. 入门Python，这些JupyterNotebook技巧就是你必须学的