Как центрировать отзывчивый CSS стол - PullRequest
Новая
       37

Как центрировать отзывчивый CSS стол

0 голосов
/ 06 апреля 2020

Я конвертирую PHP, HTML, CSS сайт с множеством традиционных 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>

Ответы [ 2 ]

0 голосов
/ 06 апреля 2020

Вы можете (например) сделать это: 

.rTable {
   display: block;
   padding:0 3em;
   width: calc(100% - 6em);
}
0 голосов
/ 06 апреля 2020

Вы можете сделать это, используя некоторую гибкость дисплея, например: 

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