如何仅使用 <div> 创建表格标签和引导程序? [英] How to create a table only using &lt;div&gt; tag and bootstrap?

查看：20
本文介绍了如何仅使用 <div> 创建表格标签和引导程序?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在下面有使用 table 标记的代码.但我想要使用 div 标签的同一张表.我试过了，但不能让它一样.下面我也附上了图片.请帮助我使用 div 标签创建相同的表.

<html lang="zh-cn"><头><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 3 简单表格示例</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{边距:20px；}</风格><身体><div class="bs-example"><table class="table"><头><tr><th>Row</th><th>名字</th><th>Last Name</th><th>电子邮件</th></tr></thead><tr><td>1</td><td>约翰</td><td>卡特</td><td>johncarter@mail.com</td></tr><tr><td>2</td><td>彼得</td><td>帕克</td><td>peterparker@mail.com</td></tr><tr><td>3</td><td>约翰</td><td>兰博</td><td>johnrambo@mail.com</td></tr></tbody>

</html>

解决方案

这不是 Bootstrap，这只是原生 HTML 和 CSS，但您可以使用以下方法构建表格布局(和类似表格的布局):

  • CSS 表格
  • CSS Flex(谨慎使用，见下文)
  • CSS 网格

这是一个快速入门:

<小时>

使用 CSS 表格的表格布局

您可以使用 CSS 表格 显示值创建表格布局:

  • display: table//
  • display: table-header-group//
  • display: table-row-group//
  • display: table-row//
  • display: table-cell//
    • <tr><td>1</td><td>约翰</td><td>卡特</td><td>johncarter@mail.com</td></tr><tr><td>2</td><td>彼得</td><td>帕克</td><td>peterparker@mail.com</td></tr><tr><td>3</td><td>约翰</td><td>兰博</td><td>johnrambo@mail.com</td></tr></tbody>
    &

    工作示例:

    /* HTML 表格样式 */表头{字体粗细:粗体；背景颜色:rgb(191, 191, 191);}表 th，表 td {填充:0 6px；文本对齐:居中；}/* CSS 表格样式 */.css-表{显示:表；}.css-表头{显示:表头组；字体粗细:粗体；背景颜色:rgb(191, 191, 191);}.css-table-body {显示:表行组；}.css-表行{显示:表格行；}.css-table-header div，.css-table-row div {显示:表格单元格；填充:0 6px；}.css-table-header div {文本对齐:居中；边框:1px 实心 rgb(255, 255, 255);}

    <h2>HTML 表格</h2><表格><头><th>Row</th><th>名字</th><th>Last Name</th><th>电子邮件</th></thead>
    <h2>CSS 表</h2><div class="css-table"><div class="css-table-header"><div>行</div><div>名字</div><div>姓氏</div><div>电子邮件</div>

<div class="css-table-body"><div class="css-table-row"><div>1</div><div>约翰</div><div>卡特</div><div>johncarter@mail.com</div>

<div class="css-table-row"><div>2</div><div>彼得</div><div>帕克</div><div>peterparker@mail.com</div>

<div class="css-table-row"><div>3</div><div>约翰</div><div>兰博</div><div>johnrambo@mail.com</div>

如您所见，上面的 HTML 表格 和 CSS 表格 看起来几乎相同.

总的来说，CSS 表格对于需要表格布局的元素来说是一个非常好的(如果可以说是未充分利用的话)解决方案.

但是如果您想使用更复杂的 CSS 工具 - 特别是如果您想要为不是表格的东西(例如用户界面)提供类似表格的 2D 布局 - 您可以使用 CSS Flex 和CSS 网格.

<小时>

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

NB Flexbox 不适用于复杂的二维布局，它对于表格布局来说真的很不理想，所以下面的例子是一个概念验证.

它可以做到，但是最好不要将 Flexbox 用于类似表格的布局(或任何其他嵌套的 2D 布局).

.css-flex-table {显示:弹性；宽度:80%；}.css-flex-table-header,.css-flex-table-body {显示:弹性；弹性:0 0 100%；}.css-flex-table，.css-flex-table-body {flex-wrap: 包裹;}.css-flex-table-header div {填充:6px；文本对齐:居中；字体粗细:粗体；背景颜色:rgb(191, 191, 191);}.css-flex-table-header div，.css-flex-table-body div {弹性:0 1 100px；填充:0 6px；边框:1px 实心 rgb(255, 255, 255);box-sizing: 边框框；}.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-header"><div>行</div><div>名字</div><div>姓氏</div><div>电子邮件</div>
<div class="css-flex-table-body"><div>1</div><div>约翰</div><div>卡特</div><div>johncarter@mail.com</div><div>2</div><div>彼得</div><div>帕克</div><div>peterparker@mail.com</div><div>3</div><div>约翰</div><div>兰博</div><div>johnrambo@mail.com</div>

<小时>

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

这是一个理想的解决方案.CSS Grid 就像 CSS Tables 一样.

.css-grid-table,.css-grid-table-header,.css-grid-table-body {显示:网格；}.css-网格表{网格模板行:24px 72px；宽度:80%；}.css-grid-table-header,.css-grid-table-body {网格模板列:自动自动最小最大(150px，25％)；行高:24px；}.css-grid-table-header {网格列间距:2px；网格模板行:自动；}.css-grid-table-body {网格模板行:自动自动自动；}.css-grid-table-header div {文本对齐:居中；字体粗细:粗体；背景颜色:rgb(191, 191, 191);}

<div class="css-grid-table-header"><div>行</div><div>名字</div><div>姓氏</div><div>电子邮件</div>
<div class="css-grid-table-body"><div>1</div><div>约翰</div><div>卡特</div><div>johncarter@mail.com</div><div>2</div><div>彼得</div><div>帕克</div><div>peterparker@mail.com</div><div>3</div><div>约翰</div><div>兰博</div><div>johnrambo@mail.com</div>

I have code below using table tag. But I want the same table using div tag. I have tried but could not make it same. Below I have attached the the image as well. Please help me out to create the same table using div tag.

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

解决方案

This isn't Bootstrap, this is just native HTML and CSS, but you can build table layouts (and table-like layouts) using:

Here's a quick primer:

Table Layout using CSS Tables

You can create tabular layouts using CSS Table display values:

Working Example:

/* 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>

As you can see the HTML Table and the CSS Table above look pretty much identical.

In general CSS Tables are a pretty good (if, arguably, underused) solution for elements which require tabular layouts.

But if you want to get use more sophisticated CSS tools - especially if you want table-like 2D layouts for things which aren't tables (e.g. User Interfaces) - you can use CSS Flex and CSS Grid.

Table-like 2D Layout using CSS Flex

N.B. Flexbox isn't intended for complex 2-dimensional layouts and it's really far from ideal for tabular layout, so the example below is a proof-of-concept.

It can be done, but it's really better not to use Flexbox for table-like layouts (or any other nested 2D layout).

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

Table-like 2D Layout using CSS Grid

This is an ideal solution. CSS Grid is like CSS Tables on steroids.

.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> 创建表格标签和引导程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆