I have a large amount of data to style. It comes in for each file rather and each type and needs to be displayed in a grid/table way, however due to the html it is causing problems. Some of the data rows are blank and others go over multiple lines.
I can't use a table as this would mean that the cells are going to go horizontal instead of vertical
See fiddle
https://jsfiddle.net/r5aj7kse/
.data {
display: flex
}
.dataColumn {
flex-grow: 1;
flex-basis: 0;
}
.dataRow {
border-bottom: 1px solid #000;
padding: 4px;
}
<div class="data">
<div class="dataColumn">
<div class="dataRow">A</div>
<div class="dataRow">B</div>
<div class="dataRow"></div>
<div class="dataRow">D</div>
</div>
<div class="dataColumn">
<div class="dataRow">A<br>A</div>
<div class="dataRow">B</div>
<div class="dataRow">C</div>
<div class="dataRow">D</div>
</div>
I need all of the cells to match up. I have tried using flex and the only way I can get it to work is to add a fixed height to the cells but this is problematic as i lose alot of data this way
Use table instead of div.
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #c6c7cc;
padding: 10px 15px;
}
th {
font-weight: bold;
}
<table>
<thead>
<tr>
<th scope="col" colspan="1">Item</th>
<th scope="col">Qty</th>
<th scope="col">table</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>1</td>
<td>text</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
<td>text</td>
</tr>
<tr>
<td>C</td>
<td>1</td>
<td>text</td>
</tr>
<tr>
<td>D</td>
<td>1</td>
<td>text</td>
</tr>
</tbody>
</table>
If it possible, you can arrange data in rows, like this:
<div class="data">
<div class="dataRow">
<div class="dataCol">A</div>
<div class="dataCol">A</div>
<div class="dataCol">A</div>
</div>
<div class="dataRow">
<div class="dataRow">B</div>
<div class="dataRow">B</div>
<div class="dataRow">B</div>
</div>
<div class="dataRow">
<div class="dataRow">C</div>
<div class="dataRow">C</div>
<div class="dataRow">C</div>
</div>
<div class="dataRow">
<div class="dataRow">D</div>
<div class="dataRow">D</div>
<div class="dataRow">D</div>
</div>
</div>
but better choice use <table> for big data-table
Related
I have split the page in 3 sections
25% width
50% width
25% width
How can i get my menu in straight line after using text-align:right. I don't want to use margin-left cause without using it the web is more responsive to other devices and looks more appealing.
What i expect to get - Imagur Image of expected outcome.
I want menu to start at yellow line.
My current code in JSFiddle - JSFiddle Example
If you're going to be using Bootstrap, you might as well just use the existing grid system that comes with it. In order to left align an element with right aligned text, you can simply float it:
ul {
list-style-type:none;
margin:0;
padding:0;
text-align:right;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="col-xs-6">
<table>
<thead>
<tr>
<th colspan="2">Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-3">
test
</div>
</div>
</div>
You simply need to add this css code:
.first ul{
text-align:left;
}
Your code would become:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#import url('//netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css');
.first{
width:25%;
overflow:hidden;
float:left;
text-align:right;
}
.first ul{
text-align:left;
}
.table{
width:50%;
float:left;
}
.three{
width:25%;
float:right;}
<div class="main">
<div class="first">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<table class="table">
<thead>
<tr>
<th colspan="2">Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<div class="three">
<p>
test</p>
</p>
</div>
</div>
I hope it helps.
I want to place the #second_row div at the bottom of the page. I've tried different solutions but none of them works.
#second_row {
position: fixed;
margin: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TH1</th>
</tr>
</thead>
</table>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TH1</th>
<th style="background-color: transparent">TH2</th>
<th style="background-color: transparent">TH3</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="row" id="second_row">
<div class="col-md-4">
Left
</div>
<div class="col-md-4">
Middle
</div>
<div class="col-md-4">
Right
</div>
</div>
</div>
For fixed position to appear in bottom you have to mention the position also like top, right, left, bottom. and there is no need of margins with fixed positioned element
So your code will work like this::
#second_row {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
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;
}
I have a question regarding to the title.
I have looked through other question and tried their bootply to make sure that these are possible (using column grid to set the size of the column). However, my case might be more complicated than that and that's why the grid system doesn't work as I think it should be. Can you give me a hand on telling me what I should do?
Code:
<div class="container-fluid">
<div id="wrapper">
<table class="table table-striped" id="table">
<thead>
<th class="col-xs-1">ID</th>
<th class="col-xs-2">Name</th>
<th class="col-xs-2">Phone</th>
<th class="col-xs-2">Email</th>
<th class="col-xs-2">University</th>
<th class="col-xs-2">Course</th>
<th class="col-xs-1">Visa Catergory</th>
<th class="col-xs-10">Age</th>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
</div>
CSS for wrapper:
#wrapper {
width: 600px;
overflow-x: scroll;
}
The problem was quite simple:
I have col-xs-10 in the column Age, but the size of it doesn't care about what number I put in there and (I think) just try to wrap up the content
I have overflow-x
The column total add up is more than 12
Width of one BS-grid cell is always 8.33% of total width of parent. 22 cells will occupy 183%. By default all cells after 100% of parent width wrap into next line. As soon as you use table, all of its <td> in one row will be aligned horizontally despite of their width. So browser draws this collision as it can, thus last table cell wil be shrinked. I think that bootstrap isn't a table format tool. It's rather a table's look beautifier. So (I think) it's better to use set of <div>-s for table structure rendering.
It seems BS has no classes to format table as you wish.
Anyway for defining table cells dimensions you can use colspan. If total of grid cells in your chunk of code is 22, then you need to define row containing 22 cells as a structure base. Look at snippet (border added for better visualization)
#wrapper {
width: 600px;
overflow-x: scroll;
margin: 0 auto;
}
table td, th, thead {
border: 1px solid orange;
}
.formatter > td {
width: 4.5%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
<div style="width: 183%;">
<table class="table table-striped" id="table">
<thead>
<tr>
<th>ID</th>
<th colspan='2'>Name</th>
<th colspan='2'>Phone</th>
<th colspan='2'>Email</th>
<th colspan='2'>University</th>
<th colspan='2'>Course</th>
<th>Visa Catergory</th>
<th colspan='10'>Age</th>
</tr>
</thead>
<tr class="formatter">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody id="data">
</tbody>
</table>
</div>
</div>
And here is solution using div-s styled with bootstrap classes:
#wrapper {
width: 600px;
overflow-x: scroll;
margin: 0 auto;
}
div[class^="col-xs-"] {
border: 1px solid orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
<div style="width: 171%;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-7">
<div class="row">
<div class="col-xs-1">ID</div>
<div class="col-xs-2">Name</div>
<div class="col-xs-2">Phone</div>
<div class="col-xs-2">Email</div>
<div class="col-xs-2">University</div>
<div class="col-xs-2">Course</div>
<div class="col-xs-1">Visa Catergory</div>
</div>
</div>
<div class="col-xs-5">
<div class="row">
<div class="col-xs-12">Age</div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is one more variant of compact render, based on color diference:
#wrapper {
width: 600px;
margin: 0 auto;
}
div[class^="col-xs-"] {
border: 1px solid orange;
box-sizing: border-box;
background: #99b;
}
div.subrow {
background: #cce;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div id="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1">ID</div>
<div class="col-xs-2">Name</div>
<div class="col-xs-2">Phone</div>
<div class="col-xs-2">Email</div>
<div class="col-xs-2">University</div>
<div class="col-xs-2">Course</div>
<div class="col-xs-1">Visa</div>
<div class="col-xs-12 subrow">Age</div>
</div>
</div>
</div>
I am experimenting with the recently released MDL kit and trying to use the grid layout with cards and tables.
what I found was the MDL grid is not as flexible as the Bootstrap grid for nested columns (probably 'cos I don't know enough about it yet). So in my 3 column layout I use cards and tables side-by-side to present the data I have.
But unfortunately the card does not span the whole width of a column unless I apply width=100% manually. But as soon as I do it the table is not responsive and overlap with cards around in when the screen size reduces.
JSFiddle
Can anyone tell me how to get rid of this issue.
<body>
<main class="mdl-layout__content">
<div class="page-content">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--4-col ">
<div class="mdl-card mdl-shadow--4dp demo-card-wide">
<div class="mdl-card__media">
<img src="http://www.gaynz.com/articles/uploads/2/Auckland-at-night.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
</div>
<div class="mdl-card__supporting-text">Auckland Sky Tower, taken March 24th, 2014</div>
<div class="mdl-card__supporting-text">The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp mdl-cell--4-col" style=" width: 100%">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">this is a text</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">another text</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">30/05/2015</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">3999.34</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
Let's see if I can help you with each problem:
First, the cards not taking up the whole column. The issue is the nested divs. If you make the column like this:
<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
rather than putting the card within the column, then it will take up the whole column. See the updated JSFiddle here.
Next, for nested columns, you need to have nested grids, like this:
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div class="mdl-card__supporting-text">
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col">
See the JSFiddle here.
It sounds like you've changed your goal a bit, but hopefully you can put these two together to fix your problem.
Here's how to do it:
.mdl-data-table {
table-layout:fixed;
width:100%;
}
#my-table td, th {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
/* unrelated to responsive table css */
#my-table{
margin-top:24px;
}
.material-icons {
vertical-align: -25%;
}
<meta name="description" content="Responsive Material Design Lite Table" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.green-light_green.min.css" />
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<section class="mdl-grid" id="my-table">
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--6-col-tablet mdl-cell--10-col-desktop mdl-cell--stretch">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<th>Key</th>
<th>Description</th>
<th>Run</th>
<th><i class="material-icons">timer</i></th>
<th>Work</th>
<th><i class="material-icons">timer</i></th>
<th>Play</th>
<th><i class="material-icons">timer</i></th>
<th>Study</th>
<th><i class="material-icons">timer</i></th>
<th>Assumptions</th>
<th>Climb Mountain</th>
<th>Fly Kite</th>
</tr>
</thead>
<tbody>
<tr>
<td>ABC-1234</td>
<td>asdf asdf asdf asdf</td>
<td>asdf asdf asdf asdf</td>
<td>25</td>
<td>qwer qwer qwer</td>
<td>25</td>
<td>sdfgs sdf sdgf</td>
<td>25</td>
<td>lkjhlk lkhjh</td>
<td>25</td>
<td>bvnfhf hffjj hdgdh</td>
<td>25</td>
<td>bjh jbh kjb bkjb</td>
</tr>
<tr>
<td>XYZ-1234</td>
<td>dfdf asdf asdf asdf</td>
<td>bgbgdf asdf asdf asdf</td>
<td>25</td>
<td>qwer qwer qwer</td>
<td>25</td>
<td>sdfgs sdf sdgf</td>
<td>25</td>
<td>lkjhlk lkhjh</td>
<td>25</td>
<td>bvnfhf hffjj hdgdh</td>
<td>25</td>
<td>bjh jbh kjb bkjb</td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-layout-spacer"></div>
</section>
To have your table adapt to the size of its container and respond to any change in size you can set its width attribute to a certain percentage.
<table class="mdl-data-table mdl-js-data-table" style="width:100%;">
...
</table>