For some reason i cannot solve the issue to my problem. I am trying to fill the parent div with the table meaning that the table and the parent are the exact same width and height. I have tried using padding and pull-left and have had no success. Any input?
http://jsfiddle.net/pc1tz5z6/3/
HTML:
<div class="container">
<div class="row">
<div class="col-lg-4 vcenter">
<div class="well">
<center>
<img class="img-circle" src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/f7/f72a7e636d1b4831eb3d45cd9bcc893f7fccd8ae_full.jpg" width="120px" height="120px">
<h1>Welcome <strong>domkalan</strong> to Ozooma DarkRP</h1>
</center>
</div>
</div>
<div class="col-lg-4 vcenter">
<div class="well">
<div style="padding:0px; padding-left: ; width: 400px;">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-4 vcenter">
<div class="well">
<div style="padding:0px; padding-left: ; width: 400px;">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
background: url("http://images8.alphacoders.com/374/374665.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.vcenter {
margin-top: 15%;
}
.well {
background: rgba(255, 255, 255, 0.6);
width: 350px;
min-height: 200px;
max-height: 600px;
border-radius: 25px;
overflow: hidden;
}
It is related to the upper level div which has a .well class, and that means it has padding in bootstrap.
Adding "padding:0" to the div.well element will erase the gap between the table and its container.
Related
this the image I'm trying to recreate
I'm trying to place the two(2) stacked images right next to each other and also make the whole three(3) images to also align right next to the sidebar tables like in the above image, but each time I try it always goes below the sidebar table. I have tried using flexbox but it doesn't work maybe I don't know it very much. please if anyone can help. Thank you
<div class="table">
<table>
<tr>
<th class="cat">Categories</th>
</tr>
<tr>
<th>Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th>Music & Equipment</th>
</tr>
<tr>
<th>Footwear</th>
</tr>
<tr>
<th>Software Products</th>
</tr>
<tr>
<th>Computer Hardware</th>
</tr>
<tr>
<th>Mobile Phones</th>
</tr>
<tr>
<th>Laptops</th>
</tr>
<tr>
<th>Furniture</th>
</tr>
<tr>
<th>Beauty Products</th>
</tr>
<tr>
<th>Computer Accessories</th>
</tr>
</table>
</div>
<div class="holder">
<div class="lone-image"> </div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
CSS Code
.table {
display: flex;
flex - flow: column;
border: 1px solid #999696;
width: 25%;
height: 60%;
box-sizing: border-box;
}
table, th, td{
border-bottom:1px solid black;
text-align: left;
padding: 10px;
}
.cat{
background-color:rgb(0, 0, 107);
color: white;
border-radius: 4px;
}
.holder{
display: flex;
justify-content: center;
align-items: center;
}
.lone-image{
background-image: url(xii.jpg);
background-size: cover;
width: 35%;
height: 410px;
}
.stacked-image{
display: flex;
flex-direction: column;
height: 400px;
width: 40%;
margin: 4px;
}
.canon{
background-size: cover;
background-image: url(canon.jpg);
width: 65%;
height: 400px;
margin-bottom: 4px;
}
.dell{
background-size: cover;
background-image: url(dell.jpg);
width: 65%;
height: 400px;
}
I came up with this.
You can play around with width's and other styling but this should give you the basic idea.
Also, using tables is a bad practice as they offer no responsiveness.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<table>
<tr>
<td>
<div id="1table">
<table border="1">
<tr>
<th class="cat">Categories</th>
</tr>
<tr>
<th>Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th>Music & Equipment</th>
</tr>
<tr>
<th>Footwear</th>
</tr>
<tr>
<th>Software Products</th>
</tr>
<tr>
<th>Computer Hardware</th>
</tr>
<tr>
<th>Mobile Phones</th>
</tr>
<tr>
<th>Laptops</th>
</tr>
<tr>
<th>Furniture</th>
</tr>
<tr>
<th>Beauty Products</th>
</tr>
<tr>
<th>Computer Accessories</th>
</tr>
</table>
</div>
</td>
<td>
<table>
<tr>
<td rowspan="2"><img src="https://i.imgur.com/JeXUv8x.png" style="height:290px"></td>
<td colspan="2"><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
<div class="holder">
<div class="lone-image"> </div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
</body>
</html>
Have a great day!
I think their was some error in your width & height selection for each div. I changed that and removed a little bit of extra flex properties and thats it Just tell me you want something like this.
Proposed code
.container{
display:flex;
width:100%;
height:60%;
}
.table{
display: flex;
flex-flow: column;
border: 1px solid #999696;
width: 25%;
height: 100%;
box-sizing: border-box;
}
table, th, td{
border-bottom:1px solid black;
text-align: left;
padding: 10px;
}
.cat{
background-color:rgb(0, 0, 107);
color: white;
border-radius: 4px;
}
.holder{
width:100%;
display: flex;
flex-direction:row;
}
.lone-image{
background:blue;
width:60%;
height: 100%;
}
.stacked-image{
display: flex;
flex-direction: column;
height: 100%;
width: 40%;
}
.canon{
width: 100%;
background:green;
height:50%;
}
.dell{
background:red;
width: 100%;
height: 50%;
}
<div class="container">
<div class="table">
<table>
<tr>
<th class="cat"> Categories</th>
</tr>
<tr>
<th> Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th> Music & Equipment</th>
</tr>
<tr>
<th> Footwear</th>
</tr>
<tr>
<th> Software Products</th>
</tr>
<tr>
<th> Computer Hardware</th>
</tr>
<tr>
<th> Mobile Phones</th>
</tr>
<tr>
<th> Laptops</th>
</tr>
<tr>
<th> Furniture</th>
</tr>
<tr>
<th> Beauty Products</th>
</tr>
<tr>
<th> Computer Accessories</th>
</tr>
</table>
</div>
<div class="holder">
<div class="lone-image">
</div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
</div>
You were heading in the right direction I know flexboxes are really cool but they do take a little while to hang on.
Do tell me whether I was of any Help :)
I created a table just like below:
As you can see the border top is not taking any changes although I did add it in the following code:
<div class="col-6 col-md-3 col-sm-6 font-style" style="font-size:10px;">
<table class="table table-outer-border font-style " >
<tbody class="font-style">
<tr >
<td>Receiver:</td>
</tr>
<tr>
<td>Attention To:</td>
</tr>
<tr>
<td>Contact No:</td>
</tr>
</tbody>
</table>
</div>
<div class="col-6 col-md-3 col-sm-6 font-style" style="font-size:10px;">
<table class="table table-outer-border font-style " >
<tbody class="font-style">
<tr >
<td>Deliver To:</td>
</tr>
<tr>
<td>Attention To:</td>
</tr>
<tr>
<td>Contact No:</td>
</tr>
</tbody>
</table>
</div>
Style:
.table-outer-border {
border-left: black solid;
border-right: black solid;
border-top: black solid ;
border-bottom: black solid;
border-width: thin;
}
Why is it not working and also is there a way to remove the lines between the rows?
There are couple of changes you need to do in your code, I have just made that for you, Kindly validate and let me know.
#MainDiv {
height: 100px;
width: 500px;
margin: 5px;
display: flex;
flex-direction: row;
font-size: 20px;
}
td {
width: 150px;
}
#firstDiv {
border: 1px solid black;
}
#secondDiv {
margin-left: 20px;
border: 1px solid black;
}
<div id="MainDiv">
<div id="firstDiv" class="col-6 col-md-3 col-sm-6 font-style">
<table class="table table-outer-border font-style ">
<tbody>
<tr>
<td>Receiver:</td>
<td></td>
</tr>
<tr>
<td>Attention To:</td>
<td></td>
</tr>
<tr>
<td>Contact No:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="secondDiv" class="col-6 col-md-3 col-sm-6 font-style">
<table class="table table-outer-border font-style ">
<tbody class="font-style">
<tr>
<td>Deliver To:</td>
<td></td>
</tr>
<tr>
<td>Attention To:</td>
<td></td>
</tr>
<tr>
<td>Contact No:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
I have the following html with a responsive table.
When the page is accessed via mobile, the user has to scroll horizontally to view the entire content, is there a bootstrap way to break the columns vertically so a mobile user does not have to scroll horizontally ?
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <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/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
<div class="container"> <h2>Table</h2> <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p> <div class="table-responsive"> <table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody> </table> </div> </div>
</body> </html>
The last example here (No More Tables) shows the desired behavior perfectly https://elvery.net/demo/responsive-tables/
though it is not done with bootstrap.
If anyone can shed light on how to achieve this with bootstrap, ill appreciate.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <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/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
<style>
.table-responsive{
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
</style>
<div class="container"> <h2>Table</h2> <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p> <div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody> </table> </div> </div>
</body> </html>
no need to do anything only put css as i putted on style tag that work perfectly
i hope this work good.
thanks.
Use this way
#media screen and (max-width: 640px) {
table#customDataTable caption {
background-image: none;
}
table#customDataTable thead {
display: none;
}
table#customDataTable tbody td {
display: block;
padding: .6rem;
}
table#customDataTable tbody tr td:first-child {
background: #666;
color: #fff;
}
table#customDataTable tbody tr td:first-child a {
color: #fff;
}
table#customDataTable tbody tr td:first-child:before {
color: rgb(225, 181, 71);
}
table#customDataTable tbody td:before {
content: attr(data-th);
font-weight: bold;
display: inline-block;
width: 10rem;
}
table#customDataTable tr th:last-child,
table#customDataTable tr td:last-child {
max-width: 100% !important;
min-width: 100px !important;
width: 100% !important;
}
}
<table class="table" id="customDataTable">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/lalji1051/ztrjqvL8/
An alternative solution is to use Bootstrap.
HTML:
<div class="col-md-1 " style="padding-top:10%">
<div class="row">
<div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell bold">
Compare Editions
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Lite
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Standard
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Premium
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Professional
</div>
</div>
<div class="row">
<div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell">
Monthly Flat Rate
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>Free</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$40/Month
</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$50/Month
</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$60/Month
</p>
</div>
</div>
</div>
The key is then just stylizing it to look like a table
#pricing-detailed-section .feature-comparison-table-header-cell {
padding: 15px;
border: 1px solid #DFE1E5;
font-size: 1rem;
padding-top: 40px;
height:100px;
}
#pricing-detailed-section .bold {
font-weight:600;
}
#pricing-detailed-section .feature-comparison-table-cell {
height: 100px;
border: 1px solid
#DFE1E5;
background-color:#FFF;
display: table;
}
#pricing-detailed-section .feature-comparison-table-cell p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
When you switch to mobile, it'll fit everything vertically. Note the code for the paragraph section solves multi-line fields not being centered.
I'm trying to imitate (in a simple way) the style of this page:
http://www.smoolis.com/screen/pricing/language/en
Essentially, I'm aiming to create three tables with product images on top, where the background color behind each of the three images changes slightly on hover in a fade effect.
I'm able to find quite a lot of examples of images changing, but few with the background color of a div - do you have an example of this working?
My WIP code is available here, though it has two issues:
1) I would like to add three different background-colors behind the 3 images
2) I would ideally not want the images to fade, but rather the background colors
3) I'd like the background colors to fade independently - e.g. now the images fade all at the same time
Any help would be super appreciated!
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: center;
border-bottom: 1px solid #ddd;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.container {
position: relative;
width: 50%;
}
.container:hover .image {
opacity: 0.8;
}
</style>
<div id="columns">
<div class="one-third">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third-last">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
</div>
To address your three questions:
In their current form background colors cannot be added to these images as they already have a white background. If you would like to adjust the background color of these images you would need to remove the background in a photo editing program.
If you did use images with a transparent background then the following would allow you to fade the background of the images.
.container .image {
background-color:blue;
transition:background-color 1s;
}
.container .image:hover {
background-color:LightBlue;
}
<div class=container>
<img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png">
</div>
<div class=container>
<img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png">
</div>
A simple test of your example code shows that at least in my case, the images do fade separately.
Also, in my example of how you would do this with a transparent image, I put the hover property on the image rather than the container. If you would rather the fading function in the same way as your example, the line can be changed to .container:hover .image.
You need to set color:#xxxxxx independently. And your image background is in the front of "background" named container you need a .PNG, so the background will be visible.
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: center;
border-bottom: 1px solid #ddd;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.container {
position: relative;
width: 50%;
}
.container:hover .image {
opacity: 0.7;
}
.container.color1:hover {
background-color:#51c2bc;
}
.container.color2:hover {
background-color:#35a9d2;
}
.container.color3:hover {
background-color:#007cab;
}
</style>
<div id="columns">
<div class="one-third">
<div class="container color1">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third">
<div class="container color2">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third-last">
<div class="container color3">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
</div>
How do I get my panel width to only be big enough to contain my table?
Plunker: http://embed.plnkr.co/o0PDPAeo2lnLKNU55Ber/preview
The number of table columns are dynamic so I can't set it to a fixed width.
<div class="container">
<div class="table-responsive standings">
<div class="panel panel-primary">
<div class="table-responsive standings">
<table class="table table-striped table-condensed entry-grid">
<thead>
<tr>
<th>Name</th>
<th class="text-center">Strikes</th>
<th class="text-center pick-title">1</th>
...
<th class="text-center pick-title">12</th>
</tr>
</thead>
<tbody>
<tr>
<td>Entry 1</td>
<td class="text-center">1</td>
...
<td class="text-center pick">A</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
.container {
width: 750px;
padding: 20px;
}
.standings > table {
width: auto;
}
.standings .pick-title {
width: 42px;
}
.standings .pick {
height: 41px;
width: 41px;
padding: 8px 0;
font-size: 10px;
}
Thanks
You will want to give a display Inline-Block to your panel DIV. This way, the panel will adjust to it's content width
.panel{
display: inline-block;
}