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.
Related
I'm showing a member who has a higher rank. Based on that, I have to show the user image along with the username.
but I'm not able to align the image and text efficiently..The problem is some username consists of a longer number of characters. As a result, the username showed in a zig-zag position..
so far, I've tried
<table style="width: 100%; table-layout: fixed" class="table table-striped text-center">
<thead class='bg-dark' style='background-color: 3658DE'>
<tr>
<th><img src='../assets/img/gold.png'/>Rank</th>
<th><i class='fa fa-user mr-1' style='color: #F4B806'></i>Members</th>
</tr>
<tr>
<td>
1
</td>
<td>
<div class='text-center'>
<img src='images' alt='user dp' class=' img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>#$username</span>
</div>
<td>
</tr>
</thead>
<tbody>
Expected output:
Rank Member
1 image Dravid
2 image Richard Nixon
3 image GrahamBell
4 image Mark twains
Output's getting:
Rank Member
1 image Dravid
2 image RichardNixon
3 image GrahamBell
4 image Mark twains
img {margin-right:10px;};
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Rank</th>
<th scope="col">Member</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><img src="image"/>member</td>
</tr>
<tr>
<th scope="row">2</th>
<td><img src="image"/>anotherMember</td>
</tr>
<tr>
<th scope="row">3</th>
<td><img src="image"/>oneMoreMember</td>
</tr>
</tbody>
</table>
Please check your table markup, it doesn't seems to have any data in <tbody> . If you have to show the user image before the username place the <img/> inside the <td> tag just before the name of the member(in your case username). This will give you the alignment as per your need, no matter how long is the username provided that the size(mostly width) of all the images is same. I have included little CSS just to provide some space between all images and usernames. Also make sure this space remains constant for all images, if you wish to include it.
Your problem is that you are using the text-center class on each <tr>'s second <td> (to display the username). That's because your those are centered accordingly resulting in this bug:
In order to solve this you have to replace it with text-left like in this example. The same for the second <th>. In order to place your item more to the right, apply a padding-left, e.g., by adding Bootstrap's pl-5:
<table style="width: 100%; table-layout: fixed" class="table table-striped text-center">
<thead class='bg-dark' style='background-color: 3658DE'>
<tr>
<th><img src='https://via.placeholder.com/25'/> Rank</th>
<th class="text-left pl-5"><i class='fa fa-user mr-1' style='color: #F4B806'></i>Members</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>Dravid</span>
</div>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>RichardNixon</span>
</div>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>GrahamBell</span>
</div>
</td>
</tr>
</tbody>
</table>
You can find a running fiddle here, which produces the following table:
I would like to remove the white space between Table Title and Sub Titles.
Also Sub Title "Sub1" together with the icon should be left-aligned within the cell
<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
<div class="mdc-card p-0">
<h6 class="card-title">Table title</h6>
<div class="table-responsive">
<table class="table">
<thead bgcolor="#aed581">
<tr>
<th>
<span class="text-left">Sub1</span>
<span class="material-icons refresh-icon">refresh</span>
</th>
<th>Sub2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">A</td>
<td>18.5%</td>
</tr>
<tr>
<td class="text-left">B</td>
<td>16.3%</td>
</tr>
<tr>
<td class="text-left">V</td>
<td>15.5%</td>
</tr>
</table>
</div>
</div>
</div>
You need do with some css for remove that space
apply this css into ur css file margin-bottom: 0; will remove space from table-responsive and card title
.card-title{
background-color: #aed581;
padding: 15px;
font-weight: bold;
margin-bottom: 0;
}
.fa-repeat{
color: lightgray;
cursor: pointer;
}
and for icon i used font-awesome icon here is the CDN link
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
Here is the HTML
<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
<div class="mdc-card p-0">
<h6 class="card-title">Table title</h6>
<div class="table-responsive">
<table class="table">
<thead bgcolor="#aed581">
<tr>
<th>
<i class="fa fa-repeat"></i>
Sub1
<!-- <span class="material-icons refresh-icon">refresh</span> -->
</th>
<th>Sub2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">A</td>
<td>18.5%</td>
</tr>
<tr>
<td>B</td>
<td>16.3%</td>
</tr>
<tr>
<td>V</td>
<td>15.5%</td>
</tr>
</table>
</div>
</div>
</div>
You can edit or preview code here
I have two tables that are meant to be shown side by side.
When the width of the first table is large (but still small enough to fit both side by side) the second table is shown below it.
Is there a way to show them side by side and only drop down if the screen width is too small?
Here is my code:
<div class="container">
<div class="row">
<div class="col-sm">
<h3>Students</h3>
<div class="row">
New
</div>
<table>
<tr>
<td>Username</td>
<td>First name</td>
<td>Surname</td>
</tr>
<tr>
<td>lilyliam</td>
<td>Lily</td>
<td>Liam</td>
</tr>
<tr>
<td>gracenoah</td>
<td>Grace</td>
<td>Noah</td>
</tr>
<tr>
<td>avawilliam</td>
<td>Ava</td>
<td>William</td>
</tr>
<tr>
<td>avawilliam</td>
<td>Ava</td>
<td>Williamsssssssssssssssssss</td>
</tr>
</table>
</div>
<div class="col-sm">
<h3>Teachers</h3>
<div class="row">
New
</div>
<table>
<tr>
<td>Username</td>
<td>First name</td>
<td>Surname</td>
<td>Type</td>
</tr>
<tr>
<td>johnsmith</td>
<td>John</td>
<td>Smith</td>
<td>ADMIN</td>
</tr>
<tr>
<td>williamjoseph</td>
<td>William</td>
<td>Joseph</td>
<td>teacher</td>
</tr>
<tr>
<td>franksmith</td>
<td>Frank</td>
<td>Smith</td>
<td>teacher</td>
</tr>
</table>
</div>
</div>
</div>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
All other css comes from bootstrap
Thanks
I am assuming that you are using the official bundle of css provided by Bootstrap. To align table's side by side you can do something like:
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Table 1</h1>
// Table 1 Here
</div>
<div class="col-md-6">
<h1>Table 2</h1>
// Table 2 Here
</div>
</div>
</div>
Hope this works for you.
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 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>