Print.css is not styling the Print Page - css

I am using Print.css and want to print a table data with styles on button click.
I have included <link rel="stylesheet" type="text/css" href="{{asset('print.css')}}" media="print"> in a page from where I wanna print table data with style. But styles are not applying on print page.
print.css
#media print{
body{
background: #000 !important;
color: #fff !important;
}
.table {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 20px !important;
}
table {
background-color: transparent !important;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
}
Table To Print with Style
<div class="panel-body" id="toPrint">
<table class="table table-striped">
<thead>
<tr>
<th>Roll No</th>
<th>Student Name</th>
<th>Father Name</th>
<th>Total Marks</th>
<th>Obtained Marks</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
#foreach($search as $student)
<tr>
<td>{!! $student->rollno !!}</td>
<td>{!! $student->name !!}</td>
<td>{!! $student->fname !!}</td>
<td>{!! $student->totalmarks !!}</td>
<td>{!! $student->obtainedmarks !!}</td>
<td>{!! $student->percentage !!}</td>
<div class="alert alert-success">
×
<strong>Success!</strong> You have searched for {{ $student->rollno }}
</div>
</tr>
#endforeach
</tbody>
</table>
<a class="btn btn-default" href="{{ url('/results') }}">Search New Result</a>
Print
</div>

Related

Toggle table cells using pure CSS

Is there any way to toggle (Show / Hide) table column or row with checkbox using CSS no JavaScript?
I've done the following code it does works with div but not with column or row
<label for="trigger">Toggle box</label>
<input id="trigger" type="checkbox">
<div class="box">
Harry I've got Toggled
</div>
<table>
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr >
<td class="box"> I am a column1, I've got same class but sadly did not get toggled! do you know why?</td>
<td> I am a column 2 I don't have any class</td>
</tr>
</tbody>
</table>
<style>
.box {
display: none;
}
#trigger:checked + .box {
display: block;
}
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
</style>
How can I toggle table column or row?
your selector is not correct, it should be #trigger:checked ~table .box
look first for a following sibling , then for the child of that sibbling if it stands inside.
.box {
display: none;
}
#trigger:checked ~ .box,
#trigger:checked ~table .box {
display: block;
}
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
<label for="trigger">Toggle box</label>
<input id="trigger" type="checkbox">
<div class="box">
Harry I've got Toggled
</div>
<table>
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr >
<td class="box"> I am a column1, I've got same class but sadly did not get toggled! do you know why?</td>
<td> I am a column 2 I don't have any class</td>
</tr>
</tbody>
</table>

:not (CSS selector) dealing with threaded selectors

I have the following code:
<div class="main-l">
<table class="tbl">
..
</table>
</div>
I am using the following CSS to exclude tables with "main-l tbl" classes:
table:not(.main-l .views-table) {
..
}
What I noticed is the not: selector excludes all the tables with classes .views-table regardless of using '.main-l .views-table'.
How would I guarantee that only those with threaded classes such as '.main-l .views-table' are excluded, but not those with only .views-table class?
Since .tbl is a child of .main-l it doesn't work this way. The :not() selector only works for the element itself, not for parent elements.
You would have to do this:
div:not(.main-l) .tbl {
...
}
Note that using div in css should be avoided, better set a class like .tbl-container or similar.
Since .main-1 is parent element you will have to use not() on that element to exclude table that is insede it.
table {
width: 50px;
height: 50px;
border: 1px solid black;
}
*:not(.main-l) > table {
background: red;
}
<div class="main-l">
<table class="views-table"></table>
</div>
<table class="views-table"></table>
You are already referring to the table but your selector is trying to refer to a class of the outer div by using main-l.
You can use one of the following to achieve what you are after:
table:not(.views-table) {
background: teal;
}
or if you want to be more specific
div.main-l table:not(.views-table) {
background: teal;
}
.main-l table {
height: 100px;
width: 100px;
border: 1px solid black;
}
table:not(.views-table) {
background: teal;
}
div.main-l table:not(.views-table) {
background: teal;
}
<div class="main-l">
<table class="tbl">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="main-l">
<table class="views-table">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="main-l">
<table class="tbl">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>

override bootstrap with my own custom stylesheet

You can see the differences what i get for my table styling with and without using bootstrap but i want the same behavior instead.
table styling without bootstrap
table styling after bootstrap
application.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_self
*= require_tree .
*/
#import "bootstrap-sprockets";
#import "bootstrap";
general.css
.pos { color: #000; }
.neg { color: #f00; }
h1 {
color:orange;
text-align: center;
}
table.listing{
background: #C3D9FF none repeat scroll 0% 0%;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:20px 20px 40px;
border-radius:10px;
}
table.listing tr.tr-head{
background: #fff;
color:#990a10;
font-weight:bold;
text-align:center;
}
table.listing .tr-head td{
padding:5px;
padding-left:10px;
}
table.listing .tr-odd{
background: #fff;
text-align:center;
padding:50px;
color:#27292b;
font-weight:600;
font-size:14px;
}
table.listing .tr-even{
background: #f1f6ff;
text-align:center;
padding:50px;
color:#27292b;
font-weight:600;
font-size:14px;
}
table.listing td.col-1{
width:10%;
padding: 5px;
padding-left:10px;
}
table.listing td.col-3{
width:13%;
padding: 5px;
padding-left:10px;
}
index.html.erb
<h1>361° YAZD Statement</h1>
<% balance = 0 %>
<table class="listing" align="center" width="100%" cellpadding="1" cellspacing="1">
<tr class="tr-head">
<td>Date</td>
<td>Description</td>
<td>Amount</td>
<td>Discount</td>
<td>Paid</td>
<td>Balance</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<% #statements.each do |statement| %>
<tr class="tr-<%= cycle('odd', 'even') %>">
<td class="col-1"><%= statement.date %></td>
<td class="col-3"><%= statement.description %></td>
<td class="col-1"><%= number_with_precision(statement.amount, :delimiter => ",", :precision => 2) %></td>
<td class="col-1 neg"><%= number_with_precision(statement.discount, :delimiter => ",", :precision => 2) %></td>
<td class="col-1 neg"><%= number_with_precision(statement.paid, :delimiter => ",", :precision => 2) %></td>
<% balance += statement.amount.to_f - statement.discount.to_f - statement.paid.to_f %>
<% color = balance >= 0 ? "pos" : "neg" %>
<td class="col-1 <%= color %>"><%= number_with_precision(balance.abs, :delimiter => ",", :precision => 2) %></td>
</tr>
<% end %>
</table>
The problem is when I import bootstrap the background property is missing;
table.listing{
background: #C3D9FF none repeat scroll 0% 0%;
}
I really appreciate if anybody could help me out!!!
div h1 {
color: orange;
text-align: center;
}
.pos {
color: #000;
}
.neg {
color: #f00;
}
.myTable {
background: #C3D9FF none repeat scroll 0% 0%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 20px 20px 40px;
}
.myTable .table,
.myTable tr {
border: 2px solid #C3D9FF;
}
.table.listing tr.tr-head {
background: #fff;
color: #990a10;
font-weight: bold;
border: 2px solid #C3D9FF;
}
.table.listing .tr-head td {
padding: 5px;
border: 2px solid #C3D9FF;
}
.table.listing .tr-odd {
background: #fff;
color: #27292b;
font-weight: 600;
font-size: 14px;
border: 2px solid #C3D9FF;
}
.table.listing .tr-even {
background: #f1f6ff;
color: #27292b;
font-weight: 600;
font-size: 14px;
border: 2px solid #C3D9FF;
}
.table.listing td.col-1 {
width: 10%;
padding: 5px;
border: 2px solid #C3D9FF;
}
.table.listing td.col-3 {
width: 13%;
padding: 5px;
border: 2px solid #C3D9FF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<h1>361° YAZD Statement</h1>
<div class="table-responsive myTable">
<table class="table table-bordered listing text-center">
<tr class="tr-head">
<td>Date</td>
<td>Description</td>
<td>Amount</td>
<td>Discount</td>
<td>Paid</td>
<td>Balance</td>
</tr>
<tr class="tr-even">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
<tr class="tr-odd">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
<tr class="tr-even">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
<tr class="tr-odd">
<td class="col-1">11-20-2015</td>
<td class="col-3">Something</td>
<td class="col-1">10,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1 neg">20,000</td>
<td class="col-1">50,000</td>
</tr>
</table>
</div>
</div>
You need to first change general.css to general.css.scss then import it into application.css.scss with your other SCSS files (and since you're using SCSS you should remove all of the comments/text/requires that you have at the top of your current application.css.scss):
#import "bootstrap-sprockets";
#import "bootstrap";
#import "general";
You should probably restart your server as well after these changes are made.
In your HTML first load bootstrap and then load your custom stylesheets. Something like this:
<!-- styles -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
This solved my problem when I experienced the same issue yesterday.

Bootstrap table. How to remove all borders from table?

How to remove all (especially outer ones) borders from bootstrap table? Here is a table without inner borders:
HTML
<style>
.table th, .table td {
border-top: none !important;
border-left: none !important;
}
</style>
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<br/>
<table data-toggle="table" data-striped="true">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-1"></div>
</row>
http://jsfiddle.net/sba7wkvb/1/
Which CSS styles need to be overriden to remove all borders?
In this case you need to set the border below the table and the borders around - table header, table data, table container all to 0px in-order to totally get rid of all borders.
.table {
border-bottom:0px !important;
}
.table th, .table td {
border: 1px !important;
}
.fixed-table-container {
border:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<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.4/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<br/>
<table data-toggle="table" data-striped="true">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-1"></div>
If you are using bootstrap this will help you:
<table class="table table-borderless">
you can set classes option to table table-no-bordered, example: http://issues.wenzhixin.net.cn/bootstrap-table/#options/no-bordered.html.
Edit: this feature is only supported in develop version(after v1.7.0): https://github.com/wenzhixin/bootstrap-table/tree/master/src.
Try this:
.table th, .table td {
border-top: none !important;
border-left: none !important;
}
.fixed-table-container {
border:0px;
}
.table th {
border-bottom: none !important;
}
.table:last-child{
border:none !important;
}
Demo JSFiddle
Using Bootstrap
In html
<table class="table no-border">
In css
.table.no-border tr td, .table.no-border tr th {
border-width: 0;
}
Source: https://codepen.io/netsi1964/pen/ogVQqG
Change the border size in the CSS for the .fixed-table-container
CSS:
.table th, .table td {
border-top: none !important;
border-left: none !important;
}
.fixed-table-container {
border:0px;
}
http://jsfiddle.net/sba7wkvb/3/
html
<table class="table noborder">
css
.noborder td, .noborder th {
border: none !important;
}
for remove outer border you should remove border from .fixed-table-container as follow :
.fixed-table-container{border: 0px;}
You need set border: none !important; to .fixed-table-container and .table. Also set border-bottom: none !important; to your first rule, .table th, .table td.
Updated Fiddle: http://jsfiddle.net/sba7wkvb/5/
It's simple, Kindly add the below code in your CSS sheet.It will remove all the borders in the table
.table th, .table td, .table {
border-top: none !important;
border-left: none !important;
border-bottom: none !important;
}
.fixed-table-container {
border:0px;
border-bottom: none !important;
}
Hope helped.
If you are using CSS3 this will help you:
.table tbody tr td, .table tbody tr th {
border: none;
}

How to override CSS style during hover in a table row?

I saw several questions on this forum related to my problem but neither of them were helpful, so am posting here.
I have a table where a style is applied at table level(.tblSignal) and td level (.tdSignalName). Here is jsfiddler link
My problem is, when I hover on the table, all the text should turn to white color. But since there is a style applied on .tdSignalName as "#0072c6", it does not override the color to white. I tried "!important" but it did not work. Please advise !
.tblSignal{
/* border-width:1px; */
border-style:solid;
}
.tblSignal:hover{
background-color:#0072c6;
color:#FFFFFF !important;
font-size:initial;
}
.tdSignalName{
font-weight:bold;
height:30px;
font-size:16px;
color:#0072c6;
}
/* .tdSignalName:hover{
color:#FFFFFF !important;
} */
.tdSignalDescription{
}
.tdSigButton{
text-align:center;
vertical-align:middle;
}
<table class="tblSignal" width="500px">
<tr >
<td class="tdSignalName" width="400px">
<div>Title</div>
</td>
<td rowspan="2" class="tdSigButton" width="100px">
<div id="divButton">
<button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button>
</div>
</td>
</tr>
<tr>
<td class="tdSignalDescription" width="400px">
<!-- _#=ctx.RenderBody(ctx)=#_ -->
<div><i>SignalDescription </i></div>
</td>
</tr>
</table>
You need to also override the .tdSignalName colour declaration when the parent is hovered...
.tblSignal:hover .tdSignalName {
color:#FFFFFF;
}
Example...
.tblSignal {
border-style: solid;
}
.tblSignal:hover {
background-color: #0072c6;
color: #FFFFFF !important;
font-size: initial;
}
.tdSignalName {
font-weight: bold;
height: 30px;
font-size: 16px;
color: #0072c6;
}
.tblSignal:hover .tdSignalName {
color: #FFFFFF;
}
.tdSigButton {
text-align: center;
vertical-align: middle;
}
<table class="tblSignal" width="500px">
<tr>
<td class="tdSignalName" width="400px">
<div>Title</div>
</td>
<td rowspan="2" class="tdSigButton" width="100px">
<div id="divButton">
<button id="btnReport" onclick="window.open('_#=SignalReportURL=#_')">Run Report</button>
</div>
</td>
</tr>
<tr>
<td class="tdSignalDescription" width="400px">
<!-- _#=ctx.RenderBody(ctx)=#_ -->
<div><i>SignalDescription </i></div>
</td>
</tr>
</table>

Resources