I have no idea of Bootstrap. Can you guide me how to make one table responsive. how to make this body responsive?
<body style="background-color:#F1F3F6 ">
<div align="center">
<h1 style="color:#0083CA;">
<img src="http://www.kerenel.com/img/banner" alt="Alternate Text" /><br />
Smart Pond
</h1>
<div id="currenttime" style="display:none;">
</div>
<table class="">
<tr>
<td><div id="water-temperature-container" style="float:left; min-height:400; background-color:red;"></div></td>
<td><div id="ph-container" style="float:left;background-color:red"></div></td>
<td><div id="do-container" style="background-color:red"></div></td>
</tr>
</table>
Data recorded at Time : <span id="lblDate"></span>
</div>
</body>
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aditya</td>
<td>Singhal</td>
<td>35</td>
</tr>
<tr>
<td>Indroneil</td>
<td>Krishnan</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
Read a Manual: Responsive tables
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
You need to add the following classes:
table
table-responsive
Code
<table class="table table-responsive">
<tr>
<td><div id="water-temperature-container" style="float:left; min-height:400; background-color:red;" ></div></td>
<td><div id="ph-container" style="float:left;background-color:red"></div></td>
<td><div id="do-container" style="background-color:red"></div></td>
</tr>
</table>
Snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-responsive">
<tr>
<td>
<div id="water-temperature-container" style="float:left; min-height:400; background-color:red;"></div>
</td>
<td>
<div id="ph-container" style="float:left;background-color:red"></div>
</td>
<td>
<div id="do-container" style="background-color:red"></div>
</td>
</tr>
</table>
Related
In the following example, I want to format the divs like a table, but I don't want to spread the text over 100% of the width of the page. I want the columns to be as close to each other so it will read as normal text. For the example below I want to display it as:
aaa bb ccc ddd
aaaaa bbbb c dd
When I try to use Bootstrap 4's .row and .col I get the table formatting I want, but then the table spreads the text over 100% of the width of the page. How can I get the above formatting?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="font-family: Consolas;">
<div class="d-flex p-2">
<div>aaa </div>
<div>bb </div>
<div>ccc </div>
<div>ddd </div>
</div>
<div class="d-flex p-2">
<div>aaaaa </div>
<div>bbbb </div>
<div>c </div>
<div>dd </div>
</div>
</div>
EDIT: I realize using a normal table without the CSS of Bootstrap might do what I want.
If you want the behavior of a <table>, that's what you should use.
Bootstrap only styles <table>s having the class of table, to allow using <table>s for any other purpose:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tbody>
<tr>
<td>aaa </td>
<td>bb </td>
<td>ccc </td>
<td>ddd </td>
</tr>
<tr>
<td>aaaaa </td>
<td>bbbb </td>
<td>c </td>
<td>dd </td>
</tr>
</tbody>
</table>
To have the Bootstrap's <table> specific styling and make the table not stretch the entire width of its parent you can give the table width: auto:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table" style="width: auto">
<tbody>
<tr>
<td>aaa </td>
<td>bb </td>
<td>ccc </td>
<td>ddd </td>
</tr>
<tr>
<td>aaaaa </td>
<td>bbbb </td>
<td>c </td>
<td>dd </td>
</tr>
</tbody>
</table>
You can also rely on Bootstrap's grid system to limit the width of the <table> or of its parent.
I have this nested table. In one of the <td> I'd like to have a scrollable div.
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:800px;overflow-x:scroll;'>This DIV should have a large width</div></td>
</tr>
</tbody>
</table>
When I insert 800px as the div width, it is displayed correctly. But, If I insert 1000px the display output is broken. Ideally, I need it up to 5000px++.
I'm not sure if this is what you wanted. This will keep your requested 5000+px width all the time, while inside a smaller scrollable div. (btw overflow-x: auto; means that it will only show the scrollbar when the content is actually overflowing rather than all the time)
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:800px;overflow-x:auto;'>
<div style='width:5000px;'>This DIV should have a large width</div>
</div></td>
</tr>
</tbody>
</table>
I hope this helps :)
I think you need to have your width as 25% and 75% since in your <thead> the first two columns account for 25% and the third 75%. So your translate the same to the <tbody>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;">
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;width:25% !important;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:75% !important;overflow-x:scroll;position:relative;'>This DIV should have a large width</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a table in which I need to split into 2 columns which contain 30% of the image and 70% of the contents. In the 30% of image section
1.I need a big image
2. Below that, I need 4 small images
HTML:
<table>
<thead>
<th style="width:30%">Image</th>-- I want this to be 30% of the table heading
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
</thead>
<tbody>
<tr *ngFor="let data of dataa>
<td> </td>-- I want this to cover 30% of the table, it should have one big image which combines 2 rows and below that, I need small 4 images with 2 images in each row
<!-- This should be 70% of table column -->
<td>{{data1}}</td>
<td>{{data2}}</td>
<td>{{data3}}</td>
<td>{{data4}}</td>
<td>{{data5}}</td>
<td>{{data6}}</td>
<td><img></td>
<td>{{data7}}</td>
<td>
<button></button>
<button></button>
</td>
<!-- 70% ends here -->
</tr>
</tbody>
</table>
Do you want something like this. The below class is to remove the space between the images.
.images {
text-align:center;
}
th.width{
width:30%;
}
<table>
<thead>
<th class="width">Image</th>
<th>Data1</th>
<th>Description</th>
<th>Address</th>
<th>Website</th>
<th>Phone No</th>
<th>E-mail</th>
<th>Images</th>
<th>Comments</th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td>
<div><img src="http://via.placeholder.com/400x150" width="100%" /></div>
<div class="images">
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
</div>
</td>
<td>{{data1}}</td>
<td>{{data2}}</td>
<td>{{data3}}</td>
<td>{{data4}}</td>
<td>{{data5}}</td>
<td>{{data6}}</td>
<td><img></td>
<td>{{data7}}</td>
<td>
<button></button>
<button></button>
</td>
</tr>
</tbody>
</table>
Try using bootstrap's grid system. It should do the trick and give you a nice responsive table aswell. You can get bootstrap from: here After including bootstrap try using the classes for tables and the grid system for styling the table.
Example source
Simple example:
<!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.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>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</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>
</body>
</html>
Hope this helps!
I'm not a web designer. I was trying to design a web layout with some scrollable columns which contains some data in the form of anchor tags which are loaded dynamically. I've designed a html table structure along with a style sheet to achieve this. Source code of this table is as shown below
<table>
<tr>
<!--COLUMN HEADERS -->
<td id="titles" style="width: 50%">
<b style="padding-left: 4%">CURRENCY</b>
<b style="padding-left: 9%">COUNTRY</b>
<b style="padding-left: 8%">SECTOR</b>
<b style="padding-left: 4%">LOCATION COUNT</b>
</td>
</tr>
<tr>
<td style="width: 50%">
<!--1st COLUMN TO HOLD COUNTRY NAMES -->
<div id="column">
<div ng-repeat="currency in allCurrencies">
<a href=""
ng-click="filterProductByCurrency(currency); filterCountryByCurrency(currency); filterSectorByCurrency(currency)">
<span ng-bind="currency"></span> <br>
</a>
<input type="hidden" name="currencyHolder" ng-model="selCurrency">
</div>
</div>
<!--2nd COLUMN TO HOLD CURRENCY NAMES -->
<div id="column">
<div ng-repeat="country in allCountries">
<a href=""
ng-click="filterProductByCountry(country); filterSectorByCurrAndCtry(country)">
<span ng-bind="country"></span> <br>
</a>
<input type="hidden" name="countryHolder" ng-model="selCountry">
</div>
</div>
<!--3rd COLUMN TO HOLD SECTOR NAMES -->
<div id="column">
<div ng-repeat="sector in allSectors">
<a href="" ng-click="filterProductBySectors(sector); filterLocBySectors(sector)"> <span
ng-bind="sector"></span> <br>
</a>
<input type="hidden" name="variantHolder" ng-model="selVariant">
</div>
</div>
<!--4th COLUMN TO HOLD LOCATION COUNT RANGE -->
<div id="column">
<div ng-repeat="locCount in locationRangeValues">
<a href="" ng-click="filterProductByRange(locCount)">
<span ng-bind="locCount"></span> <br>
</a>
</div>
</div>
</td>
</tr>
</table>
And the CSS styling for class coulmn is as shown below
#column {
background-color: #f5f5f5;
float: left;
width: 14%;
height: 125px;
overflow: auto;
overflow-y: scroll;
white-space: nowrap;
text-align: center;
}
And CSS styling for class for titles is as given below
#titles{
background-color: #f5f5f5;
color: #069;
fill: #069;
}
This works fine, but the issue with this setup is it's not responsive. I've interagted bootstrap within my application. Is there any way to make this setup more responsive using bootstrap? Please help.
To make any table responsive just place the table inside a <div> element and apply the class .table-responsive on it, as demonstrated in the example below:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter#mail.com</td>
<td>Lorem ipsum dolor sit amet…</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
<td>Vestibulum consectetur scelerisque…</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
<td>Integer pulvinar leo id risus…</td>
</tr>
</tbody>
</table>
</div>
see working ex here
View this example. add bootstrap headers and responsive class to the divs
<!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/1.12.4/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>
There are way to change the td to div by using jQuery and css but not easy and you need to write different css for every table in your application, for more detail see this
If you don't want to write css use RAHUL suggestion for scroll-able table for smaller screen by using bootstrap.
even after setting the tr:last-child's border: none, border is still visible. The edit button should be after the last row. But it got position left. http://jsfiddle.net/priyaa2002/mBfk8/ Here is how it should be
You have a floating <tr> and a floating </div>:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
<tr> <!-- WHY? -->
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
</div> <!-- WHY? -->
Get rid of them like so:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
In the future validate your HTML ;)