如何在 GitHub 自述文件中并排显示两个表格 - Shell-Bash

在 GitHub 的自述文件中，经常需要显示表格来展示数据。有时需要两个表格并排显示，以便对比或查看不同数据的关联性。本文将介绍如何在 GitHub 自述文件中并排显示两个表格，使用的是 Shell-Bash 语言。

步骤

在 GitHub 自述文件中，需要使用 markdown 语言编写内容。为了实现两个表格并排显示，我们需要使用 markdown 的表格语法，并使用 HTML 的组合语法。

1、准备表格数据

在编写自述文件之前，需要先准备两个表格的数据。表格数据可以使用 markdown 语法或其他格式来编写，但必须要与最终显示的表格格式相同。

以下是示例表格数据：

| 名称 | 数量 | | :--: | :--: | | 苹果 | 10 | | 香蕉 | 20 |

| 名称 | 单价 | | :--: | :--: | | 苹果 | 1.5 | | 香蕉 | 2.0 |

2、使用 HTML 组合语法

在 markdown 中，可以使用 HTML 语法来增强显示效果。要实现两个表格并排显示，需要使用 HTML 的组合语法，将两个表格放在同一个容器中。

下面是示例代码：

<div class="table-container">
  <div class="table-wrapper">
    <table>
      <!-- 第一个表格的代码 -->
    </table>
  </div>
  <div class="table-wrapper">
    <table>
      <!-- 第二个表格的代码 -->
    </table>
  </div>
</div>

在这个代码片段中，我们使用了一个包含两个子容器的 div 元素，每个子容器包含一个表格。两个子容器都使用了相同的 CSS 类名 table-wrapper，用于控制表格的样式，而父容器使用了另一个 CSS 类名 table-container，用于设置子容器的布局。

3、设置样式

最后，我们需要为表格设置样式，以便使它们并排显示。下面是示例 CSS 代码：

.table-container {
  display: flex;
}

.table-wrapper {
  flex: 1;
  padding: 10px;
}

在这个代码片段中，我们使用 flex 布局将表格容器中的子容器并排显示。具体来说，我们将表格容器的 display 属性设置为 flex，并为子容器定义了一个 flex 属性，让它们按比例占据剩余空间。同时，我们还设置了子容器的 padding 属性，以便增强表格的可读性。

结论

通过以上步骤，我们可以在 GitHub 自述文件中实现两个表格的并排显示。使用 HTML 的组合语法和 CSS 样式，我们可以轻松控制表格的布局和样式，并使信息更加清晰易读。