I have a Bootstrap responsive table which is within a div with the CSS display:table. This seems to be preventing the table from becoming responsive. How can I make the table responsive without changing the outer CSS?
JsFiddle
For reference, display:table is used to create a "sticky footer": How to create a sticky footer that plays well with Bootstrap 3
If you don't want to change the current css you have to make your text responsive to fix this problem.
set the font size and instead of px use vm, vw, vh or vmin These suffixes make your text responseive.
try this, may be this will help you
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.content-container {
height: 100%;
width: 100%;
display: table;
}
.table-responsive {
border: 1px solid #ddd;
display: -moz-stack;
margin-bottom: 15px;
overflow-y: hidden;
width: 100%;
}
</style>
</head>
<body>
<div class="content-container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bookings</h3></div>
<div class="bookings_list">
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Customer</th>
<th>Provider</th>
<th>Agent</th>
<th>Service</th>
<th>Status</th>
<th>Status</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="clickable" action="push" href="/bookings/UY6001">
<td>123</td>
<td>John Smith</td>
<td>ACME Corp</td>
<td>Mike</td>
<td>123456</td>
<td>Active</td>
<td>Active</td>
<td>Active</td>
</tr>
<tr class="clickable" action="push" href="/bookings/UY6000">
<td>123</td>
<td>John Smith</td>
<td>ACME Corp</td>
<td>Mike</td>
<td>123456</td>
<td>Active</td>
<td>Active</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Set your container's width based on the viewport instead of a percentage value:
#media (max-width: 768px) {
.container {
width: 100vw;
}
}
Updated Fiddle
Since container is a pretty common class in bootstrap, you might consider adding a custom class to the specific element you want to add this style to.
Related
I have created HTML newsletter template and i am using this simple media query but it is not working on gmail IOS app. I have removed all other css from file. I tried #media with screen also
<style>
#media (min-width: 639px) {
.strict-responsive{
background-color: yellow;
width: 50% !important; max-width: 50% !important; display: table-cell !important; margin: 0 auto !important; text-align: center !important;
}
}
#media (max-width: 640px) {
.strict-responsive{
background-color: blue;
width: 100% !important; max-width: 100% !important; display: table !important; margin: 0 auto !important; text-align: center !important;
}
}
</style>
I have added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml" lang="en">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and HTMLS are below. Links and urls are working and productions based.
<div id="section_1633119029896" class="hse-section">
<div class="hse-column-container hse-border" style="background-color:#ffffff;">
<div id="column_1633119029896_0" class="strict-responsive">
<div id="hs_cos_wrapper_module_16331191216405" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<table class="hse-image-wrapper" role="presentation" width="100%" cellpadding="0" align="center" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="top" style="text-align:center;padding:10px 15px 10px 10px; font-size:0px;">
<a href="mobile-phones/iphone-13?capacity=128GB&color=Pink&contractTerm=36" target="_blank" data-hs-link-id="0">
<img alt="iPhone 13" src="/iPhone%2013.jpg" style="max-width:100%;font-size:16px;" width="254" align="middle" class="stretch-on-mobile"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="column_1633119029896_1" class=" strict-responsive">
<div id="hs_cos_wrapper_module_16331191444106" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<table class="hse-image-wrapper" role="presentation" width="100%" cellpadding="0" align="center" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="top" style="text-align:center;padding:10px 15px 10px 10px; font-size:0px;">
<a href="mobile-phones/iphone-12?capacity=128GB&color=Blue&contractTerm=36" target="_blank" data-hs-link-id="0">
<img alt="iPhone 12" src="/iPhone%2012.jpg" style="max-width:100%;font-size:16px;" width="254" align="middle" class="stretch-on-mobile"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I wasn't able to replicate the issue you're seeing, however I did notice you're missing a head tag after the html tag.
With this missing, the background colours weren't rendering which flags that there is an issue.
With/without adding that in, the MQs were still working for me, however one tip would be to format your MQs like this:
#media only screen and (max-width:600px) {...}
Let us know how making these changes work for you.
With Bootstrap 4, I want my cols to be align in multiple row.
If I set rows and cols it works just fine but if one of my col need to fit 2 slot with flex-grow:2 it create a little gap between rows. I tried every flex's stuff with no success.
Here you can have the link to try it. I created 2 cases, one with divs and the other (the one I care) with a table with the row class.
Link on w3schools
.col{
border:1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col" style="flex-grow:2.08">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>
<br/>
<div class="container">
<table class="table">
<thead>
<tr class="row">
<th class="col">Firstname</th>
<th class="col">Lastname</th>
<th class="col">Email</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col" style="flex-grow:2">John (2.07 in flex-grow works in 1080p...)</td>
<td class="d-none">Doe</td>
<td class="col">john#example.com</td>
</tr>
<tr class="row">
<td class="col">Mary</td>
<td class="col">Moe</td>
<td class="col">mary#example.com</td>
</tr>
<tr class="row">
<td class="col">July</td>
<td class="col">Dooley</td>
<td class="col">july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In the first example you can see a little gap between the "1" / "2" and "2" / "3" and its the same in the second example.
I really need to use flex-grow because in my full code some of my TDs have a fixed width in PX and others TDs need to fit empty space but with the same width (or twice if I set the flex-grow:2)
It seems that W3 schools has noticed an issue too, hence their "2.07 in flex-grow...".
I'm not sure why it's occurring, but a work-around can be to add a class to those td's and then add media queries for that class at different screen sizes.
For example:
#media screen and (min-width: 992px) {
.alter-flex{
flex-grow: 2.09;
}
}
I have a tablular structure (a table with no th) that looks like:
---1--- ---2---
---3--- ---4---
I want it be like this is mobile screens:
---1---
---2---
---3---
---4---
Whatever I do i can't design that. My suggested code:
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">1</td>
<td class="col-xs12 col-sm-6 display-block">2</td>
</tr>
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">3</td>
<td class="col-xs12 col-sm-6 display-block">4</td>
</tr>
</tbody>
</table>
always results
1
2
3
4
and without display-block always results
---1--- ---2---
---3--- ---4---
If you use bootstrap you have to set col-xs-12 instead col-xs12 (add -)
See JSFiddle:https://jsfiddle.net/v09bzj89/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs-12 col-sm-6 ">1</td>
<td class="col-xs-12 col-sm-6 ">2</td>
</tr>
<tr class="row">
<td class="col-xs-12 col-sm-6">3</td>
<td class="col-xs-12 col-sm-6">4</td>
</tr>
</tbody>
</table>
Use media query and add the display: block style in that block only, so that it applies only in a particular resolution.
// This style will be applied only below screen widths 600px
#media screen and (max-width: 600px) {
.display-block {
display: block !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
<style>
#media screen and (max-width: 600px) {
.display-block {
display: block !important;
}
}
</style>
</head>
<body>
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">1</td>
<td class="col-xs12 col-sm-6 display-block">2</td>
</tr>
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">3</td>
<td class="col-xs12 col-sm-6 display-block">4</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-body" style="height:350px; background-color:#fff; border-color:#66cfff; border-style:solid; border-width:1px;padding:0px; overflow:auto;">
<div style="background-color: #0096db!important; padding: 10px 10px 30px 10px; align-items:stretch;">
<div style="float:left; vertical-align:middle">
<h2 style="color: #ffffff !important; text-align: left; font-size: 16px;font-family:Helvetica; font-weight: bold;">Last Payment</h2>
</div>
<div style="float:right ; vertical-align:middle">
<h5>
<a style="cursor:pointer; font-size:13px; color:#ffffff !important; font-weight:bold;" [routerLink]="['/historicPayments']">
View All
</a>
</h5>
</div>
</div>
<table class='table' style="margin-top:10px;">
<thead class="box-heading">
<tr class="row-style">
<th width="16%" style="vertical-align:top">Property/ Agreement ID</th>
<th width="20%" style="vertical-align:top">Property/ Agreement Name</th>
<th width="12%" style="vertical-align:top">Project ID</th>
<th width="20%" style="vertical-align:top">Project Name</th>
<th width="12%" style="vertical-align:top">Check Date</th>
<th width="12%" style="vertical-align:top">Check Amount</th>
<th width="8%" style="vertical-align:top">Invoice</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
How to stretch the div tag to be equal to table's width. Please see the screenshot. Currently there is white space showing at the end
Please check the updated code. I see it showing the white space at the end of header lable when we move the horizontal bar. Please test this code on w3c school site.
Give percentage value for width attribute.
.example { width:50%; background:green;}<div class="example">HAVE FUN!</div>
Try using width:100%; display:block;
This will help you to make your div 100%
Apply your div with display:table; css.
For example your div class is .box1 then css will be:
div.box1 {width:100%; display:table;}
I assume table width is 100% too.
I am trying to make it so two uneven columns are close together, but I'm not sure where I went wrong while I was writing the code.
When these are entered, the columns span the width of the page, where I would like this to be about 720px total, with the main column being 520px and the secondary column being 200px.
I've tried about 30 different things, changing nearly all the variables, and adding random "align=/:center"'s around all the divs.
I'm not quite sure, and I could really use some help.
I've been working on this the last 5 hours of work, and this needs to be done, I cant quite get it :(
Thank you so much!
<style>
.table { border:0px solid black; padding:10px; max-width:723px; overflow:hidden; }
.left { float:left; width:75%; }
.right { float:right; width:25%; }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="723">
<tr>
<td colspan="3"><img name="gala_r1_c1" src="/images/gala_r1_c1.jpg" width="720" height="42" border="0" alt=""></td>
</tr>
<tr>
<td colspan="3"><img name="gala_r2_c1" src="/images/gala_r2_c1.jpg" width="720" height="283" border="0" alt=""></td>
</tr>
</table>
</center>
<div class="table">
<div class="left">
<h1>From the President</h1>
<p></p>
<p>Dear Friends,</p>
blah
</div>
<div class="right">
<h1>From Students</h1>
-"<b>derp"<br>
</b>
</div>
</div>
</center>
{embed="embeds/global_footer"}
</body>
</html>
left .table { border:0px solid black;
padding:10px;
max-width:723px;
overflow:hidden;
margin:0 auto; }
So, add margin:0 auto; to the table class.
Update:
<style type="text/css">
<style>
Remove one of them... :)
Instead this:
<div class="right"> <div class="right" padding-right="100px"> <h1>From Students</h1> -"<b>derp</b> </div> </div>
try with this:
<div class="right"> <div style='padding-left:15px'> <h1>From Students</h1> -"<b>derp</b> ....</div> </div>
There are 3 changes you will need to make:
1) MOST IMPORTANT - you need a doctype! Otherwise this pushes the browser into quirks mode and into otherwise no man's land. Always include this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2) Remove the dangling </center> tag at the bottom.
3) Add margin: 0 auto; as the gentleman before me posted. This the css equivalent to the html <center> tag.
Final results:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Float center</title>
<style>
.table { border:0px solid black; padding:10px; max-width:723px; overflow:hidden; margin: 0 auto;}
.left { float:left; width:75%; }
.right { float:right; width:25%; }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="723">
<tr>
<td colspan="3"><img name="gala_r1_c1" src="/images/gala_r1_c1.jpg" width="720" height="42" border="0"
alt=""></td>
</tr>
<tr>
<td colspan="3"><img name="gala_r2_c1" src="/images/gala_r2_c1.jpg" width="720" height="283" border="0"
alt=""></td>
</tr>
</table>
</center>
<div class="table">
<div class="left">
<h1>From the President</h1>
<p></p>
<p>Dear Friends,</p>
blah
</div>
<div class="right">
<h1>From Students</h1>
-"<b>derp"<br>
</b>
</div>
</div>
{embed="embeds/global_footer"}
</body>
</html>
Snapshot: