Menu
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>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
388
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:
You can create tabular layouts using CSS Table display values:
display: table // <table>
display: table-header-group // <thead>
display: table-row-group // <tbody>
display: table-row // <tr>
display: table-cell // <td> & <th>
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>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>[email protected]</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>[email protected]</div>
</div>
<div class="css-table-row">
<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>[email protected]</div>
</div>
<div class="css-table-row">
<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>[email protected]</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.
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>[email protected]</div>
<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>[email protected]</div>
<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>[email protected]</div>
</div>
</div>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>[email protected]</div>
<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>[email protected]</div>
<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>[email protected]</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
