发表新帖
发表新帖

How to create a table only using
tag and bootstrap?

后端 未结
关注
1 1139
长情又很酷
长情又很酷 2021-02-13 20:05

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

1条回答
  • 爱一瞬间的悲伤
    爱一瞬间的悲伤 (楼主)
    2021-02-13 20:26

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

    • CSS Tables
    • CSS Flex (with caution, see below)
    • CSS Grid

    Here's a quick primer:

    Table Layout using CSS Tables

    You can create tabular layouts using CSS Table display values:

    • display: table //
    • display: table-header-group //
    • display: table-row-group //
    • display: table-row //
    • display: table-cell //
      • &

      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);
}
      HTML Table
      

      


      Row
First Name
Last Name
Email

      



      
1
John
Carter
johncarter@mail.com

      


      
2
Peter
Parker
peterparker@mail.com

      


      
3
John
Rambo
johnrambo@mail.com

      
      

      


      CSS Table
      

      

      

      Row
      

      First Name
      

      Last Name
      

      Email
      

      


      

      

      1
      

      John
      

      Carter
      

      johncarter@mail.com
      

      


      

      2
      

      Peter
      

      Parker
      

      peterparker@mail.com
      

      


      

      3
      

      John
      

      Rambo
      

      johnrambo@mail.com

      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);
}
      


      

      Row
      

      First Name
      

      Last Name
      

      Email
      

      


      

      1
      

      John
      

      Carter
      

      johncarter@mail.com
      


      2
      

      Peter
      

      Parker
      

      peterparker@mail.com
      


      3
      

      John
      

      Rambo
      

      johnrambo@mail.com

      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);
}
      


      

      Row
      

      First Name
      

      Last Name
      

      Email
      

      


      

      1
      

      John
      

      Carter
      

      johncarter@mail.com
      


      2
      

      Peter
      

      Parker
      

      peterparker@mail.com
      


      3
      

      John
      

      Rambo
      

      johnrambo@mail.com

      0 讨论(0)
       看不清?
      提交回复
      热议问题