I am using bootstrap v4 beta. I have created a table. How can i create the same table using div.
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th class="text-center"><b>Id</b></th>
<th class="text-center"><b>Name</b></th>
<th class="text-center"><b>Munit</b></th>
</tr>
</thead>
<tbody>
<tr>
<td> 1</td>
<td class="text-center"> 294</td>
<td class="text-center"> nimai</td>
<td class="text-center"> kg</td>
</tr>
<tr>
<td> 2</td>
<td class="text-center"> 200</td>
<td class="text-center"> nitai</td>
<td class="text-center"> kg</td>
</tr>
</tbody>
</table>
</div>
I also want the same format it looks like in the below picture:
You can make that easily using flexbox
.table {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.table-row {
width: 100%;
height: 10vw;
display: flex;
border-bottom: 1px solid #ccc;
}
.table-header {
font-weight: bold;
}
.table-row div:first-child {
width: 10% !important;
}
.table-row-column {
width: 30%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="table">
<div class="table-row table-header">
<div class="table-row-column table-row-index">#</div>
<div class="table-row-column table-center">Id</div>
<div class="table-row-column table-center">Name</div>
<div class="table-row-column table-center">Munit</div>
</div>
<div class="table-row">
<div class="table-row-column table-row-index">1</div>
<div class="table-row-column table-center">294</div>
<div class="table-row-column table-center">nimai</div>
<div class="table-row-column table-center">kg</div>
</div>
<div class="table-row">
<div class="table-row-column table-row-index">2</div>
<div class="table-row-column table-center">200</div>
<div class="table-row-column table-center">nitai</div>
<div class="table-row-column table-center">kg</div>
</div>
</div>
</div>
Try this
.col {
display: inline-block;
}
row {
display: block;
}
<div class="row">
<div class="col">
<div>First column</div>
<div> 1</div>
<div> 2</div>
<div>3</div>
</div>
<div class="col">
<div>Second column</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="col">
<div>Third column</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Related
In a markup with display: table I'd like to separate some rows with a dividing line.
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {display: table-row; }
.table-cell {display: table-cell; width: 50%}
.border-between {border-top:1px solid;}
.padding-t {padding-top: .5rem}
.padding-b {padding-bottom: .5rem}
<div class="table">
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">1</div>
</div>
<div class="table-row">
<div class="table-cell">2</div>
<div class="table-cell padding-b">2</div>
</div>
<div class="table-row border-between">
<div class="table-cell padding-t">3</div>
<div class="table-cell">3</div>
</div>
<div class="table-row">
<div class="table-cell">4</div>
<div class="table-cell">4</div>
</div>
<div class="table-row border-between">
<div class="table-cell">5</div>
<div class="table-cell">5</div>
</div>
<div class="table-row">
<div class="table-cell">6</div>
<div class="table-cell">6</div>
</div>
<div class="table-row">
<div class="table-cell">7</div>
<div class="table-cell">7</div>
</div>
<div class="table-row">
<div class="table-cell">8</div>
<div class="table-cell">8</div>
</div>
</div>
While this works without problem when setting border-collapse: collapse; I'm looking for a nice and clean way to add some vertical space before and after the line as I did in my example between line 2 and 3. I would favor a solution without adding extra markup and modifying some cells for providing padding. Thanks for pushing me into the right direction!
You can simply define the height of every cell thereafter align the contents(numbers) in the center will also make it looks like an expected result you want
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
width: 50%;
}
.border-between {
border-top: 1px solid;
}
.m {
height: 50px;
line-height: 50px;
}
<div class="table">
<div class="table-row">
<div class="table-cell m">1</div>
<div class="table-cell m">1</div>
</div>
<div class="table-row">
<div class="table-cell m">2</div>
<div class="table-cell m">2</div>
</div>
<div class="table-row border-between">
<div class="table-cell m">3</div>
<div class="table-cell m">3</div>
</div>
<div class="table-row">
<div class="table-cell m">4</div>
<div class="table-cell m">4</div>
</div>
<div class="table-row border-between">
<div class="table-cell m">5</div>
<div class="table-cell m">5</div>
</div>
<div class="table-row">
<div class="table-cell m">6</div>
<div class="table-cell m">6</div>
</div>
<div class="table-row">
<div class="table-cell m">7</div>
<div class="table-cell m">7</div>
</div>
<div class="table-row">
<div class="table-cell m">8</div>
<div class="table-cell m">8</div>
</div>
</div>
Lets say I have the following rows:
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2</div>
<div class="col-auto">Row 3</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 longest one</div>
<div class="col-auto">Row 3 longest one</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 shorter</div>
<div class="col-auto">Row 3 shorter</div>
</div>
This produces:
What I am looking to achieve:
What approach could I take to ensure the columns maintain the same widths between these different rows, so that they all become the width of the largest column?
You can try display:table like this:
.container {
display: table;
}
.container>.row {
display: table-row;
}
.container>.row>* {
display: table-cell;
padding:5px;
white-space:nowrap;
}
.col {
width:100%;
}
<div class="container">
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2</div>
<div class="col-auto">Row 3</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 longest one</div>
<div class="col-auto">Row 3 longest one</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 shorter</div>
<div class="col-auto">Row 3 shorter</div>
</div>
</div>
Try this.
Using a table which is set to fill the entire width. Have set col1 to take up all the space avaliable. Because its a table, the other 2 columns will just work.
Have set the text in the table cells to not wrap so you can see it working fluidly.
.custom-table {
border: 0;
width: 100%;
}
.col-wide {
width: 100%;
}
.row td {
white-space: nowrap;
padding: 5px;
}
<table class="custom-table">
<tr class="row">
<td class="col-wide">Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
</tr>
<tr class="row">
<td class="col-wide">Row 1</td>
<td>Row 2 longest one ffdssdgg</td>
<td>Row 3 longest one</td>
</tr>
<tr class="row">
<td class="col-wide">Row 1</td>
<td>Row 2 shorter</td>
<td>Row 3 shorter</td>
</tr>
</table>
Any questions, shout.
Maybe you can use display: grid.
And after you can style your rows as you want.
.container>.row {
display: grid;
grid-template-columns: 50% auto auto;
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2</div>
<div class="col-auto">Row 3</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 longest one</div>
<div class="col-auto">Row 3 longest one</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 shorter</div>
<div class="col-auto">Row 3 shorter</div>
</div>
</div>
Use grid display :
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto ;
grid-gap: 10px;
}
.grid-container > div {
text-align: left;
padding: 20px 0;
}
</style>
<div class="grid-container">
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2</div>
<div class="col-auto">Row 3</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 longest one</div>
<div class="col-auto">Row 3 longest one</div>
</div>
<div class="row">
<div class="col">Row 1</div>
<div class="col-auto">Row 2 shorter</div>
<div class="col-auto">Row 3 shorter</div>
</div>
</div>
Just use col-sm-* instead of col-auto.
use table with no border, for example like this:
<table border="0">
<tr>
<td>Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 1</td>
<td>Row 2 longest one</td>
<td>Row 3 longest one</td>
</tr>
<tr>
<td>Row 1</td>
<td>Row 2 shorter</td>
<td>Row 3 shorter</td>
</tr>
I got this working for Bootstrap 3 but the same code won't work in Bootstrap 4.
Basically, I'm trying to create a horizontal scroll for DIV and here's a working JSFIDDLE for Bootstrap 3 (which I don't want): DEMO
The same code for Bootstrap 4 isn't working though! Here's the JSFiddle for Bootstrap 4: https://jsfiddle.net/6kvw2q5h/
HTML
<div class="live__scroll">
<div class="row text-center">
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
</div>
</div>
CSS
.live__scroll {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.live__scroll .live__scroll--box {
display: inline-block;
float: none;
padding: 15px;
border: 1px solid red;
}
What am I doing wrong? I'm at wits end.
HTML
<div class="container testimonial-group">
<div class="row text-center flex-nowrap">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">5</div>
<div class="col-sm-4">6</div>
<div class="col-sm-4">7</div>
<div class="col-sm-4">8</div>
<div class="col-sm-4">9</div>
</div>
</div>
CSS
/* The heart of the matter */
.testimonial-group > .row {
overflow-x: auto;
white-space: nowrap;
}
.testimonial-group > .row > .col-sm-4 {
display: inline-block;
float: none;
}
/* Decorations */
.col-sm-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-sm-4:nth-child(3n+1) { background: #c69; }
.col-sm-4:nth-child(3n+2) { background: #9c6; }
.col-sm-4:nth-child(3n+3) { background: #69c; }
NOTE : codepen
I think you need to remove the flexbox functionality of the .row so add:
.live__scroll .row{
display:block;
}
So it should look like the following:
.live__scroll {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.live__scroll .row{
display:block;
}
.live__scroll .live__scroll--box {
display: inline-block;
float: none;
padding: 15px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="live__scroll">
<div class="row text-center">
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
<div class="col-8 live__scroll--box">1</div>
</div>
</div>
horizontal scoll bar using bootstrap 4
In table
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>bharti</td>
<td>parmar</td>
<td>422</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
In navigation bar
<div class="scrollmenu">
Home
News
Contact
About
Support
Home
News
Contact
About
Support
Home
News
Contact
About
Support
</div>
css code
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
I'm trying to use flexbox to get the same behavior as a table. For example:
<div>
<div class="flex row">
<p>Short text</p>
<p>Text </p>
</div>
<div class="flex row">
<p>Very long text</p>
<p>Text </p>
</div>
</div>
How can I get the rows to be on the same vertical line as a table?
So basically I'm trying to achieve the following result with flexbox
<table>
<tr>
<td>Short text</td>
<td>Text</td>
</tr>
<tr>
<td>Very long text</td>
<td>Text</td>
</tr>
</table>
Not using flexbox given your HTML structure.
If you want table behaviour, using divs, use CSS Tables.
A comparison for you.
table {
border-collapse: collapse;
margin-bottom: 1em;
}
td {
border: 1px solid grey;
padding: 1em;
background: lightgreen;
}
.table {
display: inline-table;
}
.row {
display: table-row;
}
p {
display: table-cell;
padding: 1em;
border: 1px solid grey;
background: lightblue;
}
<table>
<tr>
<td>Short text</td>
<td>Text</td>
</tr>
<tr>
<td>Very long text</td>
<td>Text</td>
</tr>
</table>
<div class="table">
<div class="row">
<p>Short text</p>
<p>Text </p>
</div>
<div class="row">
<p>Very long text</p>
<p>Text </p>
</div>
<div>
.row {
display: flex;
justify-content: space-around;
align-items: center;
}
.row p { width: 100% }
<div class="table">
<div class="flex row">
<p>Short text</p>
<p>Text </p>
</div>
<div class="flex row">
<p>Very long text</p>
<p>Text </p>
</div>
</div>
I have the following panel:
And what I want is to centralize the circle charts inside the td of my table and keep it centralized when it turns to mobile. I'm having some issues trying to do that. This is how my code is:
<div class="portlet-body row">
<div class="col-lg-12">
<h3 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['nomeCompleto']?></h3>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p100 orange big">
<span>100%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>PISO</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p82 big">
<span>82%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>META</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p63 green big">
<span>63%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>SUPERMETA</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
</div>
There are some classes but I'm not using them by now.
Link to codepen: http://codepen.io/anon/pen/apNrxy
Any suggestion? Thanks!
It's easy to do if you can leverage flexbox (See browser compatibility here).
If you're using Bootstrap version 4, you can just wrap the content with:
<div class="d-flex justify-content-around">...</div>
See the documentation for more information.
If you're using Bootstrap version 3, you can still use the flexbox styles directly:
display: flex;
justify-content: space-around;
Update your CSS to this
.c100 {
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
border-radius: 50%;
/* float: left; */
margin: 0 auto 0.1em auto; /* margin: 0 0.1em 0.1em 0; */
background-color: #cccccc;
}