Sample Table

by knoxg

HTML

<html>
<head>
<title>Sample Mandelbrot</title>
<script src="https://cdn.jsdelivr.net/gh/randomnoun/[email protected]/js/jquery.tabstops.js"></script>
</head>

<body>
<div class="paper">

<h1>Sample Table</h1>

<label>Visible tabs:</label><input type="checkbox">

<p>The tabstops in these paragraphs are set via CSS to
<br/><code>0.5cm bar, 1cm left, 6cm decimal dotted, 12cm decimal solid, 14cm center;</code>
</p>

<p class="alignExample3a">	<b>Entity</b>	<b>Price</b>	<b>Market cap</b>	<b>Ticker</b>
<p class="alignExample3">	Australis Oil & Gas	0.0490	59,360,000	ASX:ATS
<p class="alignExample3">	OncoSil Medical	0.063	51,070,000	ASX:OSL
<p class="alignExample3">	Coles Group	17	22,680,000,000	ASX:COL
<p class="alignExample3">	JB Hifi	47.92	5,510,000,000	ASX:JBH
<p class="alignExample3">	Cochlear Ltd	239.9	15,780,000,000	ASX:COH



</div>
</body>
</html>

CSS

.alignExample3a {
  --tabstops: 0.5cm bar, 1cm left, 6cm left dotted, 12cm decimal solid, 14cm center;
}

.alignExample3 {
  --tabstops: 0.5cm bar, 1cm left, 6cm decimal dotted, 12cm decimal solid, 14cm center;
}


body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
  font-size: 12pt;
  padding: 5px 50px;
}

.paper {
  background-color: #fff;
  border: solid 1px #ccc;
  padding: 10px;
  min-width: 23cm;
}

span.tab.visible::before {
  content: 'TAB';
  position: absolute;
  font-family: Arial, sans-serif;
  background-color: #eee;
  border: solid 1px #aaa;
  border-radius: 3px;
  font-size: 8pt;
  color: #aaa;
  padding: 2px;
}

JavaScript

$(document).ready(function() {
  // initialise tabstops
  $('p').tabstops();

  // visible tabs
  $('input[type="checkbox"]').on('input', function(e) {
    $('span.tab').toggleClass('visible', $(e.target).prop('checked'));
  });


});