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>
Related
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 trying to achieve a colored background for my table. I want that when it is on its responsive form, the first lines that are selected in the picture (the lines that start with this word "Caracteristiques") have a specific background color to structure my table, is this possible?
body{font-family:'Varela Round';}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
.responsive-table-line td:before { content: attr(data-title); }
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display:none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align:right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height:100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow:hidden !important;
text-align:left;
background-color:#f8f8f8;
padding:2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>
You can do what you are trying to do with :pseudo, I have added just two rules
body {
font-family: 'Varela Round';
}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
/**** Added CSS Rules ****/
tr:nth-child(1n+1) td:first-child {
background: red;
}
tr:nth-child(1n+1) td:first-child:before {
background: red;
}
/**** End of Added CSS Rules ****/
.responsive-table-line td:before {
content: attr(data-title);
}
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display: none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align: right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow: hidden !important;
text-align: left;
background-color: #f8f8f8;
padding: 2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>
Hope this helps :)
<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
<table id="DataTables_Table_4" class="dataTable no-footer" role="grid" aria-describedby="DataTables_Table_4_info" style="width: 100%;">
<thead>
<tbody>
<tr class="odd" role="row">
<tr class="even" role="row">
<td class="center-col multiRowSelect sorting_1">
<td>GROUP4</td>
<td class=" center-col">Enterprise Open</td>
<td class=" center-col">0</td>
</tr>
</tbody>
</table>
</div>
Are you absolutely sure you don't like xpath for that? It is awfully powerful and can in fact very well be used to find by text:
Click Element xpath=//*[contains(text(),"GROUP")]/parent::tr
I am doing responsive mail and I need to make responsive td in table (without class or using media-query).
Simply - I need on small devices rank the td under them.
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width:100%; background-color: #fff; max-width:600px;">
<tr>
<td><img src="pic" /></td>
<td><a href="https://blahblah2.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah3.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah4.com/><img src="pic" /></a></td>
</tr>
</table>
You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases.
As you have mentioned that you don't need class so m writing the inline style for each column. Try this code :
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width: 100%;
background-color: #fff; max-width: 600px;">
<tr>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
</tr>
</table>
Fiddle here
You can create a media query to force all the td elements to drop below each other at a certain screen width. This ensures they all become vertical-aligned at the same time. It also preserves the table's horizontal-aligned print format if you are generating a report for printing.
#media only screen and (min-width: 0px) and (max-width: 700px) {
td {
display:inline-block;
padding:5px;
width:100%;
}
}
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>