I want to make a table, but as it is responsive to some extent we all know that. Do anybody know what will be best replacement for making table without using table tag.
I have provided the basic table html, help me with that.
<!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.1.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>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<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>
Fully responsive table
#media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
<!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.1.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>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<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>
This worked for me. Reference :- https://elvery.net/demo/responsive-tables/
Related
The <th> are stacked on top of each other and the <td> are also stacked on top of each other. I am trying to alternate <th>over <td> for mobile devices. Your feedback would be helpful!
confirmation.html
<table class="table table-hover table-bordered table-responsive-vertical">
<thead class="thead-light">
<tr class="text-center">
<th scope="col" data-toggle="true">Venue</th>
<th scope="col">Quantity</th>
<th scope="col">Ticket Price</th>
<th scope="col">Hearing Loop</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody>
{% for ticket in tickets %}
<tr class="text-center">
<th scope="row">{{ticket.venue}}</th>
<td class="text-center">{{ticket.quantity}}</td>
<td class="text-center">$25.00 each</td>
<td class="text-center">{{ticket.loop}}</td>
<td class="text-center">${{ticket.total | floatformat:2}}</td>
</tr>
<tr>
<th colspan="4" class="text-right">Sales Tax</th>
<td class="text-center">${{ticket.tax | floatformat:2}}</td>
</tr>
<tr>
<th colspan="4" class="text-right">Total</span></th>
<td class="text-center">${{ticket.total_price | floatformat:2}}</td>
</tr>
<tr>
<td>EditDelete</td>
<td colspan="4">Checkout</td>
</tr>
{% endfor %}
</tbody>
</table>
styles.css
#media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
table, thead, tbody, th, td, tr {
display: block;
}
tr {
margin: 0 0 1rem 0;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
}
Here's a demo of the technique I typically use for responsive tables. It's written for mobile-first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table.responsive {
width: 100%;
max-width: 60em;
}
table.responsive thead {
display: none;
}
table.responsive tr {
display: block;
border-bottom: 1px solid #d0d0d0;
}
table.responsive td {
display: block;
padding: .75em .375em .75em 6.5em;
}
table.responsive td[data-header]:before {
content: attr(data-header) " ";
position: relative;
margin-left: -6.4em;
left: -.1em;
float: left;
padding-left: .375em;
max-width: 6em;
}
#media all and (min-width:360px) {
table.responsive td[data-header*="\20"]:before {
top: -1em;
}
}
#media all and (min-width:520px) {
table.responsive thead {
display: table-header-group;
}
.responsive>thead th {
text-align: left;
padding: .75em .375em;
}
table.responsive tr {
display: table-row;
border-bottom: 0 none;
}
table.responsive td {
display: table-cell;
padding: .75em .375em;
}
table.responsive td[data-header]:before {
display: none;
}
}
</style>
</head>
<body>
<table class="responsive">
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Last Accessed</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Title">Donna's Printing</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">Test batch</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">For Mr. Baker</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">Endorsements</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
</tbody>
</table>
</body>
</html>
I am trying to display book data - title, author, publisher and so on, plus image as a cover page. All of the data except the image I managed to display.
Here is my code:
Routes:
Route::get('/dynamic_pdf', 'DynamicPDFController#index');
Route::get('/dynamic_pdf/pdf', 'DynamicPDFController#pdf');
Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
use PDF;
class DynamicPDFController extends Controller
{
public function index(){
$book_data = $this->get_book_data();
return view('dynamic_pdf')->with('book_data',$book_data);
}
//get book data method
public function get_book_data(){
$book_data = DB::table('books')
->limit(515)
->get();
return $book_data;
}
public function pdf(){
PDF::setOptions(['isHtml5ParserEnabled'=>true, 'isRemoteEnabled'=>true]);
$pdf= \App::make('dompdf.wrapper'); //uses a method of dompdf
$pdf->loadHTML($this->convert_book_data_to_html());// converts book data to html
return $pdf->stream();//makes it able to show pdf file
}
function convert_book_data_to_html()
{
$book_data = $this->get_book_data();
$output = '
<h3 align="center">Book Data</h3>
<table width="100%" style="border-collapse: collapse; border: 0px;">
<tr>
<th style="border: 1px solid; padding:12px;" width="20%">Cover</th>
<th style="border: 1px solid; padding:12px;" width="30%">Title</th>
<th style="border: 1px solid; padding:12px;" width="15%">Author</th>
<th style="border: 1px solid; padding:12px;" width="15%">Publisher</th>
<th style="border: 1px solid; padding:12px;" width="20%">Year</th>
<th style="border: 1px solid; padding:12px;" width="20%">Description</th>
</tr>
';
foreach($book_data as $book)
{
$output .= '
<tr>
<td style="border: 1px solid; padding:12px;"> <img src="/storage/public/cover_images/'. $book->image .'"> </td>
<td style="border: 1px solid; padding:12px;">'. $book->title.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->author.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->publisher.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->year.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->description.'</td>
</tr>
';
}
$output .= '</table>';
return $output;
}
}
View:
<!DOCTYPE html>
<html>
<head>
<title>Laravel - How to Generate Dynamic PDF from HTML using DomPDF</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.box{
width:600px;
margin:0 auto;
}
</style>
</head>
<body>
<br />
<div class="container">
<h3 align="center">Welcome to our pdf data</h3><br />
<div class="row">
<div class="col-md-7" align="right">
<h4>Books Data</h4>
</div>
<div class="col-md-5" align="right">
Convert into PDF
</div>
</div>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Cover</th>
<th>Title</th>
<th>Author</th>
<th>Publisher</th>
<th>Year</th>
<th>Description</th>
</tr>
</thead>
<tbody>
#foreach($book_data as $book)
<tr>
<td> <img src="{{asset('/storage/public/cover_images/'.$book->image )}}" style="width:150px; height:150px; float:left; border-radius:50%; margin-right:25px;"></td>
<td>{{ $book->title }}</td>
<td>{{ $book->author }}</td>
<td>{{ $book->publisher }}</td>
<td>{{ $book->year }}</td>
<td>{{ $book->description }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</body>
</html>
The images from the view I can display but when I click the button to convert to PDF the images are not displayed but it says image not found or type unknown.
I really do not understand why it does not work.
I'm building a responsive email message, and it's rendering well in every email client except for Gmail for iPhone 6 and 6+, using iOS 10. The only thing that's going wrong is that the registered trademark and copyright symbols in the message are appearing many font sizes larger and in a blue color, when they're supposed to be gray (#646464), 9px high, with a vertical-align property of 3px.
EMAIL_PRTNR_NAME in the code snippet represents a JavaScript variable which pulls in a brand name with a registered trademark in it.
I'm using the a[x-apple-data-detectors] style in the CSS, although the registered trademarks and copyright symbols are not linked to anything.
Has this happened to anyone before? Any ideas on how to fix?
Thank you in advance!
enlarged, blue registered trademark symbol
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30"> </td>
<td width="24" class="mobileHide"> </td>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">
<div style="font-family:Helvetica, Arial, sans-serif; height:6px; font-size:6px; line-height:6px;">
</div>
<table width="353" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;"><span style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">FULL_NAME</span><br></td>
</tr>
<tr>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:13px; font-family:Helvetica, Arial, sans-serif; line-height:22px;"><span style="-webkit-text-size-adjust:none; color:#646464; font-size:13px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">EMAIL_PRTNR_NAME</span><br></td>
</tr>
</table>
<div style="height:6px; font-size:6px; line-height:6px;">
</div>
</td>
<td width="30"> </td>
</tr>
</table>
©
<span style="line-height: 15px; vertical-align: 4px; font-size:12px;">Ⓒ</span>
®
<span style="line-height: 15px; vertical-align: 4px; font-size:13px;">Ⓡ</span>
™
<span style="line-height: 12px; vertical-align: 7px; font-size:8px;">TM</span>
<span style="line-height: 15px; vertical-align: 4px; font-size:12px;">Ⓒ</span>
<span style="line-height: 15px; vertical-align: 4px; font-size:13px;">Ⓡ</span>
<span style="line-height: 12px; vertical-align: 7px; font-size:8px;">TM</span>
I am experiencing a similar issue where google is replacing it with their 'goomoji' that is rendering with incorrect styling. I believe this is a bug in gmail and will fix itself.
To avoid Enlarged registered symbol in gmail and Outlook use this code.
©
<!--[if gte mso 9]>© <![endif]--> <!--[if !mso]><!--> Ⓒ<!--<![endif]-->
®
<!--[if gte mso 9]><span style="font-size: 55%; line-height: 0px; vertical-align: 4px;">®</span> <![endif]--><!--[if !mso]><!--><span style="font-size: 55%; line-height: 0px; vertical-align: 4px;">Ⓡ</span><!--<![endif]-->
I think Google fixed it - have been tested and looks OK for ® and ™
I am trying to generate a table with the help of angular.js but I am not able to. I am a newbie to this. Can someone please help me figure out what is wrong with my code? I am sorry if this is a repetition.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dashboard</title>
<style>
body {
width: 80%;
margin: 0px auto;
}
table{
table-layout:fixed;
width:100%;
}
#f1 {
background-color:#A9A9A9;
border-style: solid;
border-width: 1px;
padding: 20px 0px 20px 20px;
}
.info {
color: #A9A9A9;
margin: 0px 0px;
display: block;
}
</style>
<script>
var app = angular.module('qDashboard',[]);
app.controller('qDashboardController',['$scope', function($scope) {
$scope.records = [
{
Age: "13",
Title: "Some Title",
Artist: "Artist",
Album : "Album",
Version : "Version",
Label: "Label",
}
];
}]);
</script>
</head>
<body bgcolor="#DCDCDC" ><!--ng-app="Dashboard" >ng-controller="DashboardController" -->
<div >
<!-- Logic for refresh button -->
<h3>Dashboard</h3>
<br>Showing results of entries <br>
<br>
<button ng-click="">Refresh</button>
<br>
<br>
<div ng-app="qDashboard" ><!--ng-controller="qDashboardController" -->
<div ng-controller="qDashboardController" >
<table >
<tr><th></th><th></th><th></th><th>Spins</th><th>Age</th><th>CCID</th><th>Title</th><th>Artist</th>
<th>Album</th><th>Version</th><th>Label</th><th>ISRC</th><th>Quarantine Node</th></tr>
<tr ng-repeat="x in records">
<td ><button ng-click="">Approve</button></td>
<td ><button ng-click="">Update</button></td>
<td><button ng-click="">Keep Inactive</button></td>
<td>{{x.Age}}</td>
<td>{{x.Title}}</td>
<td>{{x.Artist}}</td>
<td>{{x.Album}}</td>
<td>{{x.Version}}</td>
<td>{{x.Label}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
There is no issue with your logic, check if your angular script is loading, wrap it inside <head> or <body>
DEMO
var app = angular.module('qDashboard',[]);
app.controller('qDashboardController',['$scope', function($scope) {
$scope.records = [
{
Age: "13",
Title: "Some Title",
Artist: "Artist",
Album : "Album",
Version : "Version",
Label: "Label",
}
];
}]);
body {
width: 80%;
margin: 0px auto;
}
table{
table-layout:fixed;
width:100%;
}
#f1 {
background-color:#A9A9A9;
border-style: solid;
border-width: 1px;
padding: 20px 0px 20px 20px;
}
.info {
color: #A9A9A9;
margin: 0px 0px;
display: block;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dashboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body bgcolor="#DCDCDC" >
<h3>Dashboard</h3>
<br>Showing results of entries <br>
<br>
<button ng-click="">Refresh</button>
<br>
<br>
<div ng-app="qDashboard" >
<div ng-controller="qDashboardController" >
<table >
<tr><th></th><th></th><th></th><th>Spins</th><th>Age</th><th>CCID</th><th>Title</th><th>Artist</th>
<th>Album</th><th>Version</th><th>Label</th><th>ISRC</th><th>Quarantine Node</th></tr>
<tr ng-repeat="x in records">
<td ><button ng-click="">Approve</button></td>
<td ><button ng-click="">Update</button></td>
<td><button ng-click="">Keep Inactive</button></td>
<td>{{x.Age}}</td>
<td>{{x.Title}}</td>
<td>{{x.Artist}}</td>
<td>{{x.Album}}</td>
<td>{{x.Version}}</td>
<td>{{x.Label}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
could someone tell me why this isn't scaling the type in the class called "heading"?
I'm probably missing some vital element, but I can't see what it is!
Thanks!
Jim
#media only screen and (max-width: 480px)
{
/* iPhone only (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) - only screen and (max-width: 480px)
(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)*/
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
table {width: 100% !important;}
.responsive-image
img {
height: auto; line-height: 100% !important;
max-width: 100% !important;
width: 100% !important;
}
.heading
{ font-size: 10px !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="600" bgcolor="#FFFFFF">
<tr>
<td width="600"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 0 0px;" align="center" class="responsive-image" width="307" height="auto"><img src="http://contact.friendslife.co.uk/ukassets/images/482/Responsive_test/fpi_test_top_sky.jpg" width="100%" alt="" ></td>
<td width="266" bgcolor="#ED4134" style="font-family:Arial; font-weight:300; font-size:15px; color:#FFFFFF; padding:0px; text-align:right; class="heading">Newsletter June</td>
you missed a quote on the td ;)
<td width="266" bgcolor="#ED4134" style="font-family:Arial; font-weight:300; font-size:15px; color:#FFFFFF; padding:0px; text-align:right;" class="heading">Newsletter June</td>