Asciidoctor

Question

我使用 asciidoctor 和 Maven 创建文档。
我需要放一个大 table（超过页面宽度），但我不知道如何放一个相当于 css overflow-x:auto为此 table.

my.adoc:

Tables :
|===
10+|*usertable* 
| id | hostname | ip | profile | username 5+|

10+|*tapplications* 
| id | category | feature | app_license_type | app_long_desc | app_name | app_nam_exec | app_short_desc | id_feature | logo 

10+|*licenseusertable* 
| id | date_since_granted | display | feature_version | handler | server_host | server_port | id_feature | id_user |

|===

提前致谢

Answer 1

您需要添加一些自定义 CSS 才能完成。

您可以提供自己的样式表文件，通过将 -a stylesheet="mystyles.css" 添加到您的 asciidoctor 调用来完全覆盖 Asciidoctor 样式。

由于您可能只想向现有样式添加样式，因此需要使用 docinfo 文件。参见：https://asciidoctor.org/docs/user-manual/#docinfo-file

创建一个名为 docinfo.html 的文件，其中包含您的样式。例如：

<style>
.scrollable {
  overflow-x: auto;
}
</style>

注意 <style> 标签：docinfo.html 文件是一个 HTML 文件（嵌入到生成页面的 <head> 中），因此您也可以嵌入自定义 Javascript、元标记等

然后，在包含 table 的文档中，在文档标题后立即添加以下属性定义：

:docinfo: shared

此外，由于 HTML table 不支持水平滚动，您需要将 table 包裹在一个开放的块中（转换为一些 <div>包装纸）：

[.scrollable]
--

Tables :
|===
10+|*usertable* 
| id | hostname | ip | profile | username 5+|

10+|*tapplications* 
| id | category | feature | app_license_type | app_long_desc | app_name | app_nam_exec | app_short_desc | id_feature | logo 

10+|*licenseusertable* 
| id | date_since_granted | display | feature_version | handler | server_host | server_port | id_feature | id_user |

|===

--

Asciidoctor - 大溢出 table

Asciidoctor - overflow on a large table