Как создать таблицу только с помощью тега <div>и начальной загрузки? - PullRequest
Новая
       18

Как создать таблицу только с помощью тега <div>и начальной загрузки?

0 голосов
/ 17 мая 2018

У меня есть код ниже, используя табличный тег.Но я хочу ту же таблицу, используя тег div.Я пытался, но не мог сделать это так же.Ниже я также приложил изображение.Пожалуйста, помогите мне создать ту же таблицу, используя тег div.

enter image description here

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example of Bootstrap 3 Simple Tables</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .bs-example{
            margin: 20px;
        }
    </style>
    </head>
    <body>
    <div class="bs-example">
        <table class="table">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Carter</td>
                    <td>johncarter@mail.com</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Peter</td>
                    <td>Parker</td>
                    <td>peterparker@mail.com</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>John</td>
                    <td>Rambo</td>
                    <td>johnrambo@mail.com</td>
                </tr>
            </tbody>
        </table>
    </div>
    </body>
    </html>

1 Ответ

0 голосов
/ 17 мая 2018

Это не Bootstrap, это просто нативный HTML и CSS, но вы можете создавать макеты таблиц (и макеты, похожие на таблицы), используя:

  • CSS таблицы
  • CSS Flex (с осторожностью, см. Ниже)
  • CSS Grid

Вот краткий учебник:

Макет таблицы с использованием таблиц CSS

Вы можете создавать табличные макеты, используя Таблица CSS отображаемые значения:

  • display: table // <table>
  • display: table-header-group // <thead>
  • display: table-row-group // <tbody>
  • display: table-row // <tr>
  • display: table-cell // <td> & <th>

Рабочий пример: 

/* HTML TABLE STYLES */

table thead {
font-weight: bold;
background-color: rgb(191, 191, 191);
}

table th, table td {
padding: 0 6px;
text-align: center;
}


/* CSS TABLE STYLES */

.css-table {
display: table;
}

.css-table-header {
display: table-header-group;
font-weight: bold;
background-color: rgb(191, 191, 191);
}

.css-table-body {
display: table-row-group;
}

.css-table-row {
display: table-row;
}

.css-table-header div,
.css-table-row div {
display: table-cell;
padding: 0 6px;
}

.css-table-header div {
text-align: center;
border: 1px solid rgb(255, 255, 255);
}
<h2>HTML Table</h2>
<table>
<thead>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</thead>

<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>

<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>

<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>

<h2>CSS Table</h2>
<div class="css-table">
<div class="css-table-header">
<div>Row</div>
<div>First Name</div>
<div>Last Name</div>
<div>Email</div>
</div>

<div class="css-table-body">
<div class="css-table-row">
<div>1</div>
<div>John</div>
<div>Carter</div>
<div>johncarter@mail.com</div>
</div>

<div class="css-table-row">
<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>peterparker@mail.com</div>
</div>

<div class="css-table-row">
<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>johnrambo@mail.com</div>
</div>
</div>
</div>

Как видите, HTML-таблица и CSS-таблица выше выглядят в значительной степени идентичными.

В целом CSS таблицы являются довольно хорошим (если, возможно, недоиспользованным) решением для элементов, которые требуют табличных макетов.

Но если вы хотите использовать более сложные CSS-инструменты - особенно если вам нужны 2D-макеты в виде таблиц для вещей, которые не являются таблицами (например, пользовательские интерфейсы) - вы можете использовать CSS Flex и CSS Grid .

2D-макет в виде таблицы с использованием CSS Flex

NB Flexbox не предназначен для сложных двухмерных макетов и действительно далек от идеала для табличного макета, поэтому приведенный ниже пример является проверкой концепции.

Это можно сделать, но действительно лучше не использовать Flexbox для табличных макетов (или любых других вложенных 2D-макетов). 

.css-flex-table {
display: flex;
width: 80%;
}

.css-flex-table-header,
.css-flex-table-body {
display: flex;
flex: 0 0 100%;
}

.css-flex-table,
.css-flex-table-body {
flex-wrap: wrap;
}

.css-flex-table-header div {
padding: 6px;
text-align: center;
font-weight: bold;
background-color: rgb(191, 191, 191);
}

.css-flex-table-header div,
.css-flex-table-body div {
flex: 0 1 100px;
padding: 0 6px;
border: 1px solid rgb(255, 255, 255);
box-sizing: border-box;
}

.css-flex-table-header div:nth-of-type(4n),
.css-flex-table-body div:nth-of-type(4n) {
flex: 0 1 calc(100% - 308px);
}
<div class="css-flex-table">

<div class="css-flex-table-header">
<div>Row</div>
<div>First Name</div>
<div>Last Name</div>
<div>Email</div>
</div>

<div class="css-flex-table-body">
<div>1</div>
<div>John</div>
<div>Carter</div>
<div>johncarter@mail.com</div>

<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>peterparker@mail.com</div>

<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>johnrambo@mail.com</div>
</div>
</div>

2D-макет в виде таблицы с использованием CSS Grid

Это идеальное решение. CSS Grid похож на CSS таблицы на стероидах. 

.css-grid-table,
.css-grid-table-header,
.css-grid-table-body {
display: grid;
}

.css-grid-table {
grid-template-rows: 24px 72px;
width: 80%;
}

.css-grid-table-header,
.css-grid-table-body {
grid-template-columns: auto auto auto minmax(150px, 25%);
line-height: 24px; 
}

.css-grid-table-header {
grid-column-gap: 2px;
grid-template-rows: auto;
}

.css-grid-table-body {
grid-template-rows: auto auto auto;
}

.css-grid-table-header div {
text-align: center;
font-weight: bold;
background-color: rgb(191, 191, 191);
}
<div class="css-grid-table">

<div class="css-grid-table-header">
<div>Row</div>
<div>First Name</div>
<div>Last Name</div>
<div>Email</div>
</div>

<div class="css-grid-table-body">
<div>1</div>
<div>John</div>
<div>Carter</div>
<div>johncarter@mail.com</div>

<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>peterparker@mail.com</div>

<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>johnrambo@mail.com</div>
</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...