使用CSS表的表格布局

Question

我使用表格标签下面的代码。但我想使用div标签的同一个表。我试过但不能使它一样。下面我也附上了图片。请帮我用div标签创建相同的表格。

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

Answer 1

这不是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>＆amp; <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网格。

使用CSS Flex的表格式2D布局

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>

使用CSS网格的类似表格的2D布局

这是一个理想的解决方案。 CSS Grid 就像类固醇上的 CSS Tables 一样。

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

如何仅使用<div>标签和bootstrap创建表？

1 个答案:

使用CSS表的表格布局

使用CSS Flex的表格式2D布局

使用CSS网格的类似表格的2D布局