ipython 笔记本将表格与单元格左侧对齐

Question

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

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

输出如下所示：

我该怎么办：

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

Answer 1

嗯，是的！

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

• :---

  或

  ---

  = 左对齐

• ---:

  = 右对齐

• :---:

  =居中

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

澄清

---

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

---

解决方案

步骤如下：

• 首先在要显示表格的 Markdown 单元格上方创建一个

  Code cell

  （不是 Markdown）。
• 然后在其中的代码单元格中写入以下内容。

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

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

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

• 首先您需要创建一个名为

  custom.css

  的文件，在其中放置以下代码

table {float: left};

• 然后你必须将此文件移动到你的 ipython 目录，它将是这样的

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

希望对你有帮助😊

Answer 6

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

只需制作以下文件即可

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

并添加以下代码。

table {float: left};

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

Answer 7

!important

覆盖渲染_html的css

使用您的样式！重要

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

Answer 8

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

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

但是，如果您有大量 CSS，最好将其放在另一个文件中，以保证文档的整体美观。

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

Answer 9

如果您在检查器中查看表格，您会发现问题的原因是表格上的

margin-left

和

margin-right

CSS 属性设置为

auto

，使得它居中。 您可以通过在

custom.css

:

中执行类似操作来使其左对齐

.rendered_html table {
    margin-left: 0;
}

这只应该左对齐那些特定的表格，而不会影响其他任何内容。

Answer 10

由于关于第一个问题（例如，如何将整个表格向左对齐），没有一个答案真正对我有用，这是我的：

看起来将表格包装在内联块 div 中可以很好地完成这项工作！
（这也适用于关于第二个问题的已接受答案......）

<div style="display: inline-block">

| left | aligned | table |
| ---  | ------- | ----- |
| 1    | 2       | 3     |

</div>