ipython笔记本将表格对齐到单元格的左侧答案

【问题标题】：ipython notebook align table to the left of cellipython笔记本将表格对齐到单元格的左侧
【发布时间】：2014-03-20 11:55:15
【问题描述】：

我有以下 ipython 笔记本代码（markdown）：

#### example table
|Name|Description|
|--|-------------------------------|
|Mary |She is a nice girl.|
|Jackie |He is a very naughty boy.|

输出如下所示：

我该怎么做：

单元格表格左对齐，现在默认居中。
右对齐第二列文本。

【问题讨论】：

3 年后，这个问题仍在帮助人们。 :-)
@TMWP 差不多 5 ;)
@Yatrix 差不多 8 :)

标签： ipython-notebook

【解决方案1】：

嗯，是的！

| Name | Description | age         
| :- |-------------: | :-:
|Mary| She is a nice girl.  | 20
| Jackie Junior | He is a very naughty boy. | 5

:--- 或 --- = 左对齐
---: = 右对齐
:---: = 居中

【讨论】：

酷，你已经回答了我的第二个问题。第一个怎么样？顺便说一句，第一个问题表示整个表格在页面的中心，我希望将它对齐到页面边框的左侧。
啊，我不明白你想让表格左对齐。为此我不知道，我不确定在 Markdown 中是否可行。但是可以通过使用模板通过修改表格的 CSS 属性左对齐表格来将 nbconvert 转换为 html
在 jupyter notebook 的新降价单元格中不起作用（几年前他们从 ipython notebook 更改了名称）：所有单元格内容都是右对齐的。有什么想法吗？
正如@JoachimWagner 所说，这似乎不起作用，并且与此错误有关：github.com/jupyter/notebook/issues/3919
@nealmcb，你是对的，但它适用于 jupyter 实验室。 github.com/jupyterlab/jupyterlab/pull/5301

【解决方案2】：

回答第一个问题 - 表格左对齐 - 在表格降价单元格上方创建并运行代码单元格，内容如下：

%%html
<style>
table {float:left}
</style>

【讨论】：

这会强制所有后续行位于表格的右侧，并且 Roberto 下面的解决方案不起作用。那么如何把它放在左边而不弄乱周围的格式呢？
@orodbhen 我已经编辑了我的解决方案以使用新样式的 jupyter-notebook，它解决了您的问题吗？
它对我不起作用，使用table { text-align: left } 代替效果很好。
table {align:left;display:block} 试试这个到后面的行上方浮动到表格的右侧

【解决方案3】：

我建议使用 knuth 答案的这种变体，它不会影响桌子周围剩余元素的流动。将此代码放在包含表格的单元格上方的单元格中：

%%html
<style>
  table {margin-left: 0 !important;}
</style>

【讨论】：

我刚刚在 Jupyter / Anaconda 4.2 的 Python 2.7 上测试了这两种解决方案。 “浮动”解决方案有效。您在帖子中提出的 margin-left 解决方案并没有改变我笔记本中表格的对齐方式。出于好奇，您是在 3.x 还是 2.7 上测试的？
@TMWP 你是对的，默认 css 样式发生了一些变化。要解决此问题，请在样式末尾添加 !important（如在编辑的解决方案中）以解决问题。感谢您的报告。
修复了 2.7。输出也比原来发布的输出稍微干净一些，这似乎增加了一点垂直空间。
在 3.5 中也适用于我
为我工作 - 2020 年 12 月

【解决方案4】：

您可以在 Ipython 中进行自定义首选项。

只需制作以下文件

~/.ipython/profile_default/static/custom/custom.css

并添加以下代码。

table {float: left};

并且您不必将自定义 css 放入所有 ipython 文件中。

【讨论】：

如何将单元格宽度设置得更宽？
这里有相当详尽的关于设置单元格宽度的讨论：stackoverflow.com/questions/21971449/…。祝你好运。
对于 Jupyter 笔记本，使用 ~/.jupyter//custom/custom.css。

【解决方案5】：

!important 覆盖渲染的_html的css

将您的样式与 !important 一起使用

<style> table td, table th, table tr {text-align:left !important;} </style>

【讨论】：

【解决方案6】：

回答第一个问题：创建表格并为其分配 float:left 属性时，您最终必须添加更多 CSS 来解析表格周围的文本。将其放在降价单元之前的代码单元中

%%html
<style>
    table {
        display: inline-block
    }
</style>

但是，如果您有很多 CSS，最好将其放在另一个文件中以使文档整体美观。

@jrjc 完美回答了第二个问题 ;)

【讨论】：

【解决方案7】：

我知道很多人已经回答了这个问题，但就个人而言，我发现他们的回答缺少更多描述，因此很多人无法实现。

澄清

另外，我想澄清一件事，我没有给出对齐表格内的值的解决方案，而是对齐整个表格呈现本身。如果您正在寻找表格单元格对齐的解决方案，那么您可以考虑第一个答案本身

解决方案

步骤如下：

首先在要显示表格的降价单元上方创建一个Code cell（不是降价）。
然后在你的代码单元格里面写下以下内容。

%%html
<style>
table {float:left}
</style>
Run your Code cell.

现在只需像往常一样创建表格，无需添加任何额外内容。瞧！您的表格现在应该呈现在左侧。

对于每个笔记本，您都必须执行此步骤来更改表格对齐方式。但是，如果您不想这样做，可以按照@Anderson 回答。为方便起见，我在这里复制他的答案。

首先您需要创建一个名为custom.css 的文件，您将在其中放置以下代码

table {float: left};

然后你必须把这个文件移动到你的 ipython 目录，它会是这样的

~/.ipython/profile_default/static/custom/custom.css

希望对你有所帮助?

【讨论】：

【解决方案8】：

是的，我也不喜欢那个居中的桌子。在导入部分之后将其插入笔记本顶部：

from IPython.core.display import HTML
table_css = 'table {align:left;display:block} '
HTML('<style>{}</style>'.format(table_css))

IPython.core.display 命名空间允许您在笔记本中嵌入音频、本地文件链接以及 HTML。

【讨论】：