如何将响应式CSS表居中

Question

我正在将具有许多传统html表的PHP，HTML，CSS网站转换为使用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>

Answer 1

您可以使用类似以下的显示功能来做到这一点：

    .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>

Answer 2

您可以（例如）执行此操作：

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