The responsive table with a border has been designed. The problem is wraptexting, even when included th.nowrap in css, where data is overlapping and two horizontal lines appear when I look into the mobile view.
I had declared nowrap text in css and even td and th but its not working.
How can I solve this wraptext error?
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span>
<font color="blue">Se</font>
</span>
</div>
<thead>
<tr>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Enq</font>
</th>
<th style="width:7.8%;white-space:nowrap;" nowrap="nowrap">
<font color="grey">Da</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Bu</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Prop</font>
</th>
<th style="width:17.9%;white-space:nowrap;">
<font color="grey">Pr</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">District</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">City</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">Bedrooms</font>
</th>
<th style="width:7.9%;white-space:nowrap;">
<font color="grey">Details</font>
</th>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Update</font>
</th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"><a>Det </a></td>
<td style="width:8%;white-space:nowrap;"><a> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
table {
width: 100%;
white-space: nowrap;
}
thead, tbody, tr, td, th {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
white-space: nowrap;
}
thead th {
height: 40px;
white-space: nowrap;
/*text-align: left;*/
}
tbody {
height: 40px;
overflow-y: auto;
white-space: nowrap;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
white-space: nowrap;
}
I think this is what you wanted. I removed all the nowrap code, as you didn't need it to achieve the responsive layout.
The key here is to give the tables parent element position:relative;, float:left; and a width width:100%; so the table's width:100%; has a meaning. (100% of what?).
You also don't need to give every column a width. It's enough to provide widths for one row and the rest of the table will use those rules.
There was a <div> inside the table which I removed to above the table.
Here is the code: (run the snippet)
Note: the borders on the th are there just to show the width of each. I also changed the width of the widest column from 18% to 14% and gave the 4% to the last two columns (2% each).
.table-responsive
{
position:relative;
float:left;
width:100%;
}
table
{
width: 100%;
}
th
{
color:grey;
border:1px solid #000;
}
td
{
text-align:right;
}
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="blue">Se</font></span>
</div>
<table class="table table-bordered mbn">
<tr>
<th style="width:8%;">Enq</th>
<th style="width:8%;">Da</th>
<th style="width:10%;">Bu</th>
<th style="width:10%;">Prop</th>
<th style="width:14%;">Pr</th>
<th style="width:10%;">District</th>
<th style="width:10%;">City</th>
<th style="width:10%;">Bedrooms</th>
<th style="width:10%;">Details</th>
<th style="width:10%;">Update</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Det</td>
<td>ed</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Please Use this code
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here.</p>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>
Please use below code
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="blue">Se</font></span>
</div>
<thead>
<tr>
<th style="width:8%;white-space:nowrap;"><font color="grey">Enq</font></th>
<th style="width:8%;white-space:nowrap;" nowrap="nowrap"><font color="grey">Da</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Bu</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Prop</font></th>
<th style="width:18%;white-space:nowrap;"><font color="grey">Pr</font></th>
<th style="width:10%;white-space:nowrap;""><font color="grey">District</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">City</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Bedrooms</font></th>
<th style="width:8%;white-space:nowrap;"><font color="grey" >Details</font></th>
<th style="width:8%;white-space:nowrap;"><font color="grey">Update</font></th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;">Det </a></td>
<td style="width:8%;white-space:nowrap;"> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Related
I have an angular MD bootstrap table where I want to have a horizontal scrollbar at the top and bottom of the table.
Following is the code,
<div layout="column" layout-align="center stretch" flex>
<div layout="row" style="margin: 20px;">
<div flex></div>
</div>
<md-table-container flex>
<table md-progress="vm.searchTablePromise" md-table single>
<thead md-sticky
style="background-color:#00a9da;"
md-head md-order="vm.query.order">
<tr md-row>
<th style="color: white;" md-column md-order-by="name">
Name
</th>
<th style="color: white;" md-column md-order-by="id">
ID
</th>
<th style="color: white;" md-column md-order-by="ein">
EIN
</th>
<th style="color: white;" md-column md-order-by="phNumber">
Ph. Number
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in vm.data">
<td md-cell>
<div style="min-width: 200px;">{{item.name}}</div>
</td>
<td md-cell>
{{item.id}}
</td>
<td md-cell>
<div style="min-width: 80px;">{{item.ein}}</div>
</td>
<td md-cell>
{{item.phNumber}}
</td>
</tr>
</tbody>
</table>
</md-table-container>
</div>
Now, I have a horizontal scroll at the bottom, I also want to have it at the top.
This link provides a solution here but I don't want to have a JS related code for scrolling.
Any help is much appreciated.
Unforunately, there is no way without javascript to have both a scrollbar on top and at the bottom.
It is possible to have a scroll bar on top with css, but that is still only one scrollbar:
md-table-container{
width: 100%;
overflow: scroll;
display: block;
transform: rotate(180deg) scaleX(-1);
}
table{
transform: rotate(180deg) scaleX(-1);
}
The only way to go is to use javascript. And the easiest way to implement it is to use the jQuery Doublescroll plugin
Download the file and include it as ds.js in your html. Here is a full example:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="ds.js"></script>
<script>
$(function(){
$('#the-table').doubleScroll();
});
</script>
<div layout="column" layout-align="center stretch" style="width:100%; overflow:hidden" flex>
<div layout="row" style="margin: 20px;">
<div flex></div>
</div>
<md-table-container id="the-table" style="width:100%; overflow:scroll; display:block" flex>
<table style="width:100%" md-progress="vm.searchTablePromise" md-table single>
<thead md-sticky
style="background-color:#00a9da;"
md-head md-order="vm.query.order">
<tr md-row>
<th style="color: white;" md-column md-order-by="name">
Name
</th>
<th style="color: white;" md-column md-order-by="id">
ID
</th>
<th style="color: white;" md-column md-order-by="ein">
EIN
</th>
<th style="color: white;" md-column md-order-by="phNumber">
Ph. Number
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in vm.data">
<td md-cell>
<div style="min-width: 200px;">{{item.name}}</div>
</td>
<td md-cell>
{{item.id}}
</td>
<td md-cell>
<div style="min-width: 80px;">{{item.ein}}</div>
</td>
<td md-cell>
{{item.phNumber}}
</td>
</tr>
</tbody>
</table>
</md-table-container>
</div>
Here's a birds eye view of what I'm trying to accomplish, and for the most part it works. I'm trying to make my table behave like an Excel sheet where the headers stay in place as you scroll.
So I created a table with just headers and then each tab has tables in them. When the page first loads, it will grab the size of each column and make my headers tables (hTable) columns match the widths. When the browser is resized it fires of that function so everything matches. Everything is working perfectly like I need it to.
The problem now comes when I try to click on a tab using jQuery. For some reason, that line breaks the resizing code. I've placed the click function at the bottom of the page, at the top, in the $(function), outside of the function. That 1 single line of code breaks my resizing function and I can't figure out why.
Below you will find my code and the structure of my code. I've removed the content of the tables but the structure is still the same.
<html>
<head>
<script type="text/javascript">
//<![CDATA[
var curTab = 'E';
$(function(){
hTableResize();
$(window).resize(hTableResize);
$('#tab-'+curTab).click(); // *** THIS BREAKS THE FUNCTIONALITY ***
}); //$(function){}
function hTableResize(){
$('.cTable thead').hide();
var col1 = $('.cTable td:eq(0)').width();
var col2 = ($('.cTable td:eq(1)').width());
var col3 = ($('.cTable td:eq(2)').width());
var col4 = $('.cTable td:eq(3)').width();
$('.hTable').css('width',col1+col2+col3+col4+'px !important');
$('.hTable th:eq(0)').width(col1);
$('.hTable th:eq(1)').width(col2);
$('.hTable th:eq(2)').width(col3);
$('.hTable th:eq(3)').width(col4);
}
//]]>
</script>
</head>
<body>
<div id="contenContainer">
<p><span style="font-size:larger;"><b>Clients</b></span><br>
+ Add Client</p>
<ul class="nav nav-tabs" role="tablist" style="margin-top:7px; background-color:#ffffff; width: 100%;">
<li role="presentation" class="" id="tA">A</li>
<li role="presentation" id="tB">B</li>
<li role="presentation" id="tC">C</li>
<li role="presentation" id="tD">D</li>
<li role="presentation" id="tE">E</li>
<li role="presentation" id="tF">F</li>
</ul>
<table class="table-bordered table-hover table-striped hTable">
<tbody><tr style="background-color:#ffffff;">
<th nowrap="" style="text-align: center; width: 82px;">Code</th>
<th nowrap="" style="width: 0px;">Client Name</th>
<th style="text-align: center; width: 184px;">Sub</th>
<th nowrap="" style="text-align: center; width: 149px;">Consignor/Consignee <br>
Required</th>
</tr>
</tbody></table>
<div style="overflow-y: scroll; height:100%;">
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="secA">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secB">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secC">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secD">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secE">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secF">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
</div>
</div> <!-- <div style="overflow-y: scroll;"> -->
</div>
</body>
</html>
So, I have this Invoice page. and i am adding a watermark behind the page. i need to repeat the watermark for each page that would be printed.
The problem is that, I don't know how many pages would there be. there could be any number of pages.
I need to show watermark behind every page.
These images are taken from Google Chrome's print mode.
This is the page's html. you needn't go through it. the only point here is that there is a div that i know occurs two times. I used that in javascript to repeat the watermark.
<div class="content-box pad25A" style="page-break-after: always;">
<div class="row" style="min-height:1000px">
<div class="col-md-12">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="/Images/ProjectImages/Project-Logo.jpg" style="width:100px;height:100px" class="img-circle" />
</div>
</div>
<div class="col-xs-5">
<center>
<div class="row">
<div class="col-xs-12">
<div style="font-size:14px;font-weight:bold;">TIGER INCENSE</div>
</div>
<div class="col-xs-12">
<center>
<div style="font-size:14px;font-weight:bold;">TigerIncenseRAATradersCompany#gmail.com</div>
</center>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<address style="font-size:14px;font-weight:bold" class="invoice-address">Pakistan</address>
</div>
</div>
</center>
</div>
<div class="col-xs-4 float-right text-right">
<h4 class="invoice-title">Invoice</h4>No. <b>#52462</b>
<div class="divider"></div>
<div class="invoice-date mrg20B" style="font-weight:500">23 April 2018</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Client information:</h2>
<ul class="reset-ul">
<li><b style="font-weight:bold">Name:</b><span> Sir Fazal-e-Wahid</span></li>
<li><b>Address:</b><span> Peshawar</span></li>
<li><b>Phone:</b><span> 03319090057</span></li>
</ul>
</div>
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Order Info:</h2>
<ul class="reset-ul">
<li><b>Date:</b><span> 20 April 2018</span></li>
<li><b>Status:</b> <span class="bs-label label-warning">Delivered</span></li>
</ul>
</div>
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Order Details:</h2>
<p style="font-weight:600 !important;">Fragrance Sticks for use</p><br>
</div>
</div>
<table class="table mrg20T table-bordered">
<thead>
<tr>
<th>#</th>
<th>Product Name</th>
<th class="text-center">Per Piece</th>
<th>Price Per Piece</th>
<th>Price Per Carton</th>
<th>Carton Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 08 Feb 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #7057</th>
</tr>
<tr>
<td>1</td>
<td>China Incense Stick for Mosquito</td>
<td class="text-center">48</td>
<td>Rs : 100</td>
<td>Rs : 4800</td>
<td>125</td>
<td>Rs : <span class="RowTotal">600000</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 02 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #635</th>
</tr>
<tr>
<td>1</td>
<td>China Incense Stick </td>
<td class="text-center">240</td>
<td>Rs : 18</td>
<td>Rs : 4320</td>
<td>20</td>
<td>Rs : <span class="RowTotal">86400</span></td>
</tr>
<tr>
<td>2</td>
<td>China Incense Stick </td>
<td class="text-center">240</td>
<td>Rs : 18</td>
<td>Rs : 4320</td>
<td>28</td>
<td>Rs : <span class="RowTotal">120960</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 26 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #292</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 31 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #658</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 18 Apr 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #1902</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
</tbody>
</table>
<center>
<div style="font-size:14px;font-weight:bold">THANK YOU FOR YOUR BUSINESS</div>
</center>
</div>
<br />
<div class="row Signature">
<div class="col-xs-5">
<table class="table mrg20T table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Per Piece</th>
<th>Carton</th>
</tr>
</thead>
<tbody>
<tr>
<td>China Incense Stick </td>
<td>240 </td>
<td>48</td>
</tr>
<tr>
<td>China Incense Stick for Mosquito</td>
<td>48 </td>
<td>125</td>
</tr>
<tr>
<td>Crystal</td>
<td>70 </td>
<td>102</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<span style="font-size:16px;font-weight:bold">
NET TOTAL.
<span class="TotalAmount">1154150</span>
</span>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<center>
<span style="font-size:16px;font-weight:bold">
<span class="TotalAmount">Eleven Lakh Fifty-Four Thousand One Hundred And Fifty Rupees Only</span>
</span>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="row Signature">
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>Reciever Signature</b>
</center>
</div>
</div>
</div>
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>GM. Signature</b>
</center>
</div>
</div>
</div>
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>Proprietor Signature</b>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="content-box pad25A" style="page-break-after: always;">
<center>
<p style="font-size:20px;font-weight:bold">About Our Company</p>
</center>
<div id="row">
<div class="col-xs-12">
<table class="table table-responsive">
<tr>
<td><p style="font-size:16px;font-weight:bold">1</p></td>
<td><p style="font-size:16px;">Tiger Incense fragrence is amazing and unique.</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">2</p></td>
<td><p style="font-size:16px;">Use itger insence for fragrence and keep your environment redolence</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">3</p></td>
<td><p style="font-size:16px;">Meterial in tiger insence is very good and the fragrance is very amazing.</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">4</p></td>
<td><p style="font-size:16px;">If there are any complaints for tiger brand please email or contact us.</p></td>
</tr>
</table>
</div>
</div>
</div>
The last page is hardcoded so i have added a watermark behind it by using javascript and repeating content through it.
This is how i am repeating the "Tiger incense" watermark for now
$(function () {
$(".content-box").each(function () {
$(this).after('<div class="watermark">TIGER INSENCE</div>');
});
});
this is the watermark's css
.watermark {
position: fixed;
opacity: 0.2;
/* Safari */
-webkit-transform: rotate(-60deg);
/* Firefox */
-moz-transform: rotate(-60deg);
/* IE */
-ms-transform: rotate(-60deg);
/* Opera */
-o-transform: rotate(-60deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position: absolute;
font-size: 130px;
margin-top: -700px;
margin-left: -50px;
white-space: nowrap;
}
What i want is to repeat the watermark for each page there would be. using javascript or css or any javascript library that would help.Also Page size would always be A4.
I would consider an overlay with a background that you repeat each 100vh. You can activate this style only on print using media query.
I used SVG for simplicity, you can easily replace with an image.
body {
min-height: 300vh;
position: relative;
margin: 0;
}
body:before {
content: "";
position: absolute;
z-index: 9999;
inset: 0;
background:
url('data:image/svg+xml;utf8,<svg style="transform:rotate(-45deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Lorem </text></svg>')
0 0/100% 100vh;
}
take watermark as background image
<style type="text/css" media="print">
.content-box
{
background-image:url('watermarkimage.png');
background-repeat:repeat-y;
background-position: center;
background-attachment:fixed;
background-size:100%;
}
</style>
This is my table and I want to get the value of "Spielzeit" and "Coins".
I've tried a lot like
document.querySelector("div.page Spielzeit");
document.getElementById('page').getElementsByTagName('th');
document.querySelectorAll("#page th");
But nothing worked.
I cant find my table, because there is no table id.
Maybe you know how to "find" my values.
Thanks
<div id="page">
<table style="margin-left: 125px; margin-top:50px; width: 300px;">
<tbody>
<tr>
<th style="text-align: left;">Benutzername:</th>
<th style="color: #9e7538; text-align: right;">Dantes999</th>
</tr>
<tr>
<th style="text-align: left;">Reich:</th>
<th style="color: #9e7538; text-align: right;">Not empire</th>
</tr>
<tr>
</tr>
<tr>
<th style="text-align: left;">Charaktere:</th>
<th style="color: #9e7538; text-align: right;">0</th>
</tr>
<tr>
<th style="text-align: left;">Spielzeit:</th>
<th style="color: #9e7538; text-align: right;"> Minuten</th>
</tr>
<tr>
<th style="text-align: left;">Coins:</th>
<th style="color: #9e7538; text-align: right;">0 I-Coins</th>
</tr>
<tr>
<th style="text-align: left;">Coins:</th>
<th style="color: #9e7538; text-align: right;">0 V-Coins</th>
</tr>
<tr>
<th style="text-align: left;">Lagerpasswort:</th>
<th style="color: #9e7538; text-align: right;">000000</th>
</tr>
<tr>
<th style="text-align: left;">Loeschcode:</th>
<th style="color: #9e7538; text-align: right;">1234567</th>
</tr>
</tbody>
</table>
</div>
If there's only one table on your page, document.querySelector("table").get(0) should give you your table.
Second, page is an id in your HTML, not a class. So it should be selected with # not .
You can change your HTML to this:
<div id="page">
<table style="margin-left: 125px; margin-top:50px; width: 300px;">
<tbody><tr>
<th class="item" style="text-align: left;">Benutzername:</th> <th class="value" style="color: #9e7538; text-align: right;">Dantes999</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Reich:</th> <th
class="value" style="color: #9e7538; text-align: right;">Not empire</th>
</tr><tr>
</tr><tr>
<th class="item" style="text-align: left;">Charaktere:</th>
<th class="value" style="color: #9e7538; text-align: right;">0</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Spielzeit:</th> <th
class="value" style="color: #9e7538; text-align: right;"> Minuten</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Coins:</th> <th
class="value" style="color: #9e7538; text-align: right;">0 I-Coins</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Coins:</th> <th
class="value" style="color: #9e7538; text-align: right;">0 V-Coins</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Lagerpasswort:</th> <th class="value" style="color: #9e7538; text-align: right;">000000</th>
</tr>
<tr>
<th class="item" style="text-align: left;">Loeschcode:</th> <th class="value" style="color: #9e7538; text-align: right;">1234567</th>
</tr>
</tbody></table>
Now you can use document.querySelector(".item[text='Spielzeit']); to select the corresponding item and get the text of it's next element for the value
So your code should be:
var elem = document.querySelector(".item[text='Spielzeit']");
var value = elem.parentNode.querySelectorAll('.value').html;
I have been developing a GeoIP Attack Map, similar to the Norse Attack Map. I am trying to add a dashboard/legend to my app that will be updated and appended to as new data is processed by the data server. I am trying to use a bootstrap grid/table approach to styling, but I am having issues getting the final table to occupy all of the grid space it has been allocated. I am very new to bootstrap (I just started working with it yesterday) and my html/css styling in general could definitely use some work. All advice pertaining to any aspect of my approach is appreciated.
Link to project branch - https://github.com/MatthewClarkMay/geoip-attack-map.git
HTML:
<div class='container-fluid'>
<div class='row'>
<div class='col-md-1'>
<table class='table table-condensed' id='service-table'>
<thead>
<tr>
<th class='text-center'>Color</th>
<th class='text-center'>Service</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class='circle' id='ftp-color' style='background:#ff0000'></div></td>
<td>FTP</td>
</tr>
<tr>
<td><div class='circle' id='ssh-color' style='background:#ff8000'></div></td>
<td>SSH</td>
</tr>
<tr>
<td><div class='circle' id='telnet-color' style='background:#ffff00'></div></td>
<td>TELNET</td>
</tr>
<tr>
<td><div class='circle' id='email-color' style='background:#80ff00'></div></td>
<td>EMAIL</td>
</tr>
<tr>
<td><div class='circle' id='whois-color' style='background:#00ff00'></div></td>
<td>WHOIS</td>
</tr>
<tr>
<td><div class='circle' id='dns-color' style='background:#00ff80'></div></td>
<td>DNS</td>
</tr>
<tr>
<td><div class='circle' id='http-color' style='background:#00ffff'></div></td>
<td>HTTP</td>
</tr>
<tr>
<td><div class='circle' id='https-color' style='background:#0080ff'></div></td>
<td>HTTPS</td>
</tr>
<tr>
<td><div class='circle' id='sql-color' style='background:#0000ff'></div></td>
<td>SQL</td>
</tr>
<tr>
<td><div class='circle' id='snmp-color' style='background:#8000ff'></div></td>
<td>SNMP</td>
</tr>
<tr>
<td><div class='circle' id='smb-color' style='background:#bf00ff'></div></td>
<td>SMB</td>
</tr>
<tr>
<td><div class='circle' id='auth-color' style='background:#ff00ff'></div></td>
<td>AUTH</td>
</tr>
<tr>
<td><div class='circle' id='rdp-color' style='background:#ff0060'></div></td>
<td>RDP</td>
</tr>
<tr>
<td><div class='circle' id='dos-color' style='background:#ffccff'></div></td>
<td>DOS</td>
</tr>
<tr>
<td><div class='circle' id='icmp-color' style='background:#ffcccc'></div></td>
<td>ICMP</td>
</tr>
<tr>
<td><div class='circle' id='other-color' style='background:#ffffff'></div></td>
<td>OTHER</td>
</tr>
</tbody>
</table> <!--close service-table-->
</div> <!--close container service col-->
<div class='col-md-2'>
<table class='table table-condensed' id='continent-origin-table'>
<thead>
<tr>
<th class='text-center' style='width:20%;' >Count</th>
<th class='text-center' style='width:80%;'>Continent</th>
</tr>
</thead>
<tbody>
<!--APPEND CONTENT HERE-->
</tbody>
</table> <!--close continent-origin-table-->
</div> <!--close continent-origin col-->
<div class='col-md-2'>
<table class='table table-condensed' id='country-origin-table'>
<thead>
<tr>
<th class='text-center' style='width:20%;'>Count</th>
<th class='text-center' style='width:20%;'>Flag</th>
<th class='text-center' style='width:60%;'>Country</th>
</tr>
</thead>
<tbody>
<!--APPEND CONTENT HERE-->
</tbody>
</table> <!--close country-origin-table-->
</div> <!--close country-origin col-->
<div class='col-md-7'>
<table class='table table-condensed' id='live-attacks-table'>
<thead>
<tr>
<th class='text-center' style='width:20%;'>Timestamp</th>
<th class='text-center' style='width:20%;'>IP</th>
<th class='text-center' style='width:10%;'>Flag</th>
<th class='text-center' style='width:20%;'>Country</th>
<th class='text-center' style='width:20%;'>City</th>
<th class='text-center' style='width:10%;'>Service</th>
</tr>
</thead>
<tbody>
<!--APPEND TABLE ROWS HERE-->
</tbody>
</table> <!--close live-attacks-table-->
</div> <!--close live-attack col-->
</div>
</div> <!--close dashboard-->
CSS:
body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#map {
height:100%;
width:100%;
position:absolute;
top:0;
bottom:0;
}
.circle {
height:18px;
width:18px;
border-radius:50%;
margin:0px;
}
.container-fluid {
height:25%;
width:100%;
position:absolute;
bottom:3.5%;
background:black;
opacity:0.7;
}
table {
height:100%;
margin:0px;
}
tbody {
height:100%;
display:block;
overflow-y:scroll;
}
tr {
display:block;
}
th, td {
color:white;
}
.col-md-1 {
height:100%;
}
.col-md-2 {
height:100%;
}
.col-md-7 {
height:100%;
}
#service-table th, td {
width:100%;
}
.row {
height:100%;
}
according to the bootstrap docs, .col-xx-xx must be a child of .row which in turn is a child of .container or .container fluid.
Please take a look at the example at the bootstrap docs, properly setup your HTML and check if it's ok now.
Example:
<div class="container">
<div class="row">
<div class="col-md-7">
Content 1
</div>
<div class="col-md-5">
Content 2
</div>
</div>
</div>
EDIT:
I see your problem now. It's because you apply the display: block on tbody and tr (for overflowing).
I suggest taking a look at this site to create a tbody with overflow by CSS. Or this Stack Overflow question by CSS and javascript. Unfortunately you have to make use of fixed widths/heights.