如何使响应式 CSS 表居中答案

【问题标题】：How to center a Responsive CSS Table如何使响应式 CSS 表居中
【发布时间】：2020-07-18 16:19:36
【问题描述】：

我正在使用 CSS 将包含许多传统 html 表格的 PHP、HTML、CSS 网站转换为响应式表格。
问题：我怎样才能让这个表格在页面上居中？
也许这与使用 Display: Block 并单独定义列宽有关......但我已经试验和研究/谷歌搜索了几个小时，并且无法获得在使整个 css 表居中的同时保持单个列宽的组合。 ..所以任何帮助表示赞赏。
我尝试过的示例代码如下

.rTable {
   display: block;
}
.rTableRow{
   clear: both;
}
.rTableCell {
   border: 1px solid #999999;
   float: left;
   height: 17px;
   overflow: hidden;
   padding: 3px 1.8%;
}
.column1{ width: 10%;}
.column2{ width: 20%;}
.column3{ width: 30%;}
}

<div class="rTable">
	<div class="rTableRow">
		<div class="rTableCell column1"><style="width: 200px;">ID</style></div>
		<div class="rTableCell column2">Name</div>
		<div class="rTableCell column3">City</div>
	</div>
	<div class="rTableRow">
		<div class="rTableCell column1">9</div>
		<div class="rTableCell column2">Bobby McGee</div>
		<div class="rTableCell column3">Baton Rouge</div>
	</div>
	<div class="rTableRow">
		<div class="rTableCell column1">61</div>
		<div class="rTableCell column2">Big Bad John</div>
		<div class="rTableCell column3">Lumberton</div>
	</div>
		<div class="rTableRow">
		<div class="rTableCell column1">967</div>
		<div class="rTableCell column2">Bjilly Joe McAllister</div>
		<div class="rTableCell column3">Tallahatchie</div>
	</div>
</div>

【问题讨论】：

您可以使用网格以更好的方式做到这一点，您可以吗？
pssst.. 对实际表格使用表格标签没有任何问题。只有在没有其他方法符合目的时，才应将 Divs 用作最后的手段。
天啊，不知怎的，我错过了 CSS 网格。刚查了一下。我会试一试。谢谢你的提示。话虽如此，我认为老式桌子没有“响应能力”，因此在当今包括平板电脑和智能手机在内的多个平台的世界中应该被抛弃。

标签： css css-tables centering

【解决方案1】：

你可以像这样使用一些 display flex 来做到这一点：

    .container {
    height: 100vh;
    display: flex;
    /*centers the table horizontally */
    justify-content: center;
    /*centers the table vertically */
    align-items: center;
}

.rTable {
    display: block;
}

.rTableRow {
    clear: both;
}

.rTableCell {
    border: 1px solid #999999;
    float: left;
    height: 17px;
    overflow: hidden;
    padding: 3px 1.8%;
}

.column1 {
    width: 10%;
}

.column2 {
    width: 20%;
}

.column3 {
    width: 30%;
}

 <div class="container">
    <div class="rTable">
        <div class="rTableRow">
            <div class="rTableCell column1">
                <style
                ="width: 200px;">ID</style></div>
            <div class="rTableCell column2">Name</div>
            <div class="rTableCell column3">City</div>
        </div>
        <div class="rTableRow">
            <div class="rTableCell column1">9</div>
            <div class="rTableCell column2">Bobby McGee</div>
            <div class="rTableCell column3">Baton Rouge</div>
        </div>
        <div class="rTableRow">
            <div class="rTableCell column1">61</div>
            <div class="rTableCell column2">Big Bad John</div>
            <div class="rTableCell column3">Lumberton</div>
        </div>
        <div class="rTableRow">
            <div class="rTableCell column1">967</div>
            <div class="rTableCell column2">Bjilly Joe McAllister</div>
            <div class="rTableCell column3">Tallahatchie</div>
        </div>
    </div>
</div>

【讨论】：

这似乎是这样做的，谢谢。但是，它不遵守指定的列宽。也就是说，它确实保持了统一的列宽。我将尝试具有更多列的实际案例。这样做的问题是必须为整个网站中的每一列创建一个类...如果您有 20 个表...实际上显示查询结果...并且每个表都有 n 列...那么看起来需要 20 * n 列宽类。也许我会开始另一个线程，讨论如何在表格视图中显示查询结果时保持统一的列宽。

【解决方案2】：

你可以（例如）这样做：

.rTable {
   display: block;
   padding:0 3em;
   width: calc(100% - 6em);
}

【讨论】：

填充似乎将表格向左移动但不在屏幕中心