如何仅使用CSS将自动生成的HTML表格居中对齐？

我有一个HTML文件中的表，这些表是从标记表自动生成的（我使用R packagebookdown创建一个GitBook）。我希望在我的网站上满足以下几个条件：

如果表格小于页面宽度，则应将其居中对齐

如果表格非常宽且不适合页面，则表格应具有单独的x轴滚动条，该滚动条仅可移动表格（请参见下面的示例）。此条件应适用于每个溢出的表

尽管表格宽度不同，但表格标题的宽度应为窗口宽度的100%（如下例所示） 目前，条件2和3已经满足，但我得到的表是左对齐的。由于HTML是自动生成的，所以我所能做的就是创建一个自定义CSS文件并对其进行修改（我无法修改HTML）

问题：如何仅通过修改CSS获得中心对齐的表格

以下是我的问题的简化示例：

表格{
显示：块；
保证金：25像素自动；
溢出-x：自动；
}
表格标题{
显示：块；
}
表标题跨度{
字体大小：粗体；
}
表td，表th{
填充：0px 15px；
}
表tr：第n个子项（2n）{
背景色：#fbeecb；
}

表15.1：
表格标题，表格标题，表格标题，表格标题，表格标题，
表格标题，表格标题，表格标题，表格标题，表格标题，
表格标题，表格标题，表格标题，表格标题，表格标题，
表标题，表标题，表标题。
XXXXXXXXXXXXXXXXXX
164.21.876087608760
118.81.9317
180.42.0957
184.02.0969
表15.2：
表格标题，表格标题，表格标题，表格标题，表格标题，
表格标题，表格标题，表格标题，表格标题，表格标题，
表格标题，表格标题，表格标题，表格标题，表格标题，
表标题，表标题，表标题。
XYXXXXXXXXXXXXXXXXXXXXXXXXXXXXXYXYXYXYXYXY
164.21.8760164.21.8760164.21.8760164.21.8760164.21.8760164.21.876087608760
118.81.9317118.81.9317118.81.9317118.81.9317118.81.9317118.81.9317
180.42.0957180.42.0957180.42.0957180.42.0957180.42.0957180.42.0957
184.02.0969184.02.0969184.02.0969184.02.0969184.02.0969184.02.0969

只需使用css

标题侧：顶部外部


表格{
边界塌陷：塌陷；
边框：1px纯绿色；
利润率：2米自动；
溢出-x：自动；
标题侧：顶部外侧；
}
td，th{
边框：1px纯灰；
填充：0px 15px；
高度：1米；
宽度：110px；
文本对齐：居中；
}
th{
文本对齐：右对齐；
}
表标题跨度{
字体大小：粗体；
}
表tr：第n个子项（2n）{
背景色：#fbeecb；
}

表15.1：
表格标题，表格标题，表格标题，表格标题，表格标题，
表格标题，表格标题，表格标题，表格标题，表格标题，
表格标题，表格标题，表格标题，表格标题，表格标题，
表标题，表标题，表标题。
XXXXXXXXXXXXXXXXXX
164.21.876087608760
118.81.9317
180.42.0957
184.02.0969
不要将
display:block
设置为任何表格标签，默认情况下，表格具有
display:table
。这些样式为表标记注入了独特的行为，使它们不仅仅是一个div（当标记具有
display:block
时，它基本上就是一个div）

属性
align
（例如
…
）已被弃用--请改用
style=“text align:right”

冲突的
显示后：块
样式被删除--
边距：25px自动使所有表格居中

默认情况下，标题不能超过表格的宽度，除非使用。不幸的是，这只适用于。唯一有效的解决方案是在表外放置块标记

由于表的宽度不同，每个表都需要包装在一个块标记中，然后将所有内容包装在另一个块元素中

我在工作中也遇到了同样的问题——后端动态生成了这些我无法控制的丑陋表。唯一的解决方案是在呈现表之后应用JavaScript。下面的演示提供了必要的JavaScript，可以通过有效（但丑陋）的HTML和CSS实现所有目标


演示

/*
插入
*/
const main=document.createElement（'main'）；
document.body.insertAdjacentElement（'afterbegin'，main）；
/*
将每个包装上一个，然后将每个插入
*/
const tabs=document.queryselectoral（'table'）；
tabs.forEach（t=>{
const sec=document.createElement（'section'）；
t、 parentNode.insertBefore（第二节，t）；
第二节儿童（t）；
document.querySelector（'main'）。insertAdjacentElement（'beforeend'，sec）；
});
/*
创建并在每个
获取相应文件的内容并将其呈现到div.caption中
全部删除
*/
const caps=document.queryselectoral（'caption'）；
caps.forEach（cap=>{
让html=``；
cap.closest（'table'）.insertAdjacentHTML（'beforebeagin'，html）；
const newCap=cap.closest（'table'）。previousElementSibling；
newCap.innerHTML=cap.innerHTML；
取下盖子（）；
});
/*
从每个类中删除align属性并添加.right类
*/
const rth=document.querySelectorAll（'th[align=right]'）；
rth.forEach（单元格=>{
cell.removeAttribute（'align'）；
cell.classList.add（'right'）；
});
main{
宽度：100vw；
填充：0 20px；
溢出x：可见；
}
部分{
最小宽度：100%；
宽度：最小含量；
}
桌子{
保证金：25像素自动；
溢出-x：自动；
}
.标题{
最小宽度：100%；
边缘底部：-20px；
}
.标题跨度{
字体大小：粗体
}
运输署，
th{
填充：0px 15px；
}
.对{
文本对齐：右对齐；
}
表tr:N chil