Skip to content

Instantly share code, notes, and snippets.

@fovea1959

fovea1959/test_table.html

Last active September 7, 2020 14:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fovea1959/545fdc10532b33513e842fc460f1af7c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fovea1959/545fdc10532b33513e842fc460f1af7c to your computer and use it in GitHub Desktop.
Download ZIP
test file for getting anchors out from behind Bootstrap 4 navbar.
Raw
test_table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- don't use the slim version, need $.getJSON for my openlayers code -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
body {
padding-top: 60px; /* Whatever the height of your navbar is; the default is 50px */
}
.c0 {
}
.c1:before { /* didn't work */
height: 60px;
content: "";
display: block;
}
.c2 {
padding-top: 60px;
margin-top: -60px;
}
</style>
<title>Names</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Title</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/do/something">Link</a>
</li>
</ul>
</div>
<div class="navbar-text text-right">
Blah.
</div>
</nav>
<main role="main">
<div class="container-fluid">
<div class="row">
<div class="col">
<table class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">name</th>
</tr>
</thead>
<tbody>
<tr id="X00" class="c0">
<th scope="row">
<a href="/do/edit?id=X00">0</a>
</th>
<td>
Person 0
</td>
</tr>
<tr id="X01" class="c0">
<th scope="row">
<a href="/do/edit?id=X01">1</a>
</th>
<td>
Person 1
</td>
</tr>
<tr id="X02" class="c0">
<th scope="row">
<a href="/do/edit?id=X02">2</a>
</th>
<td>
Person 2
</td>
</tr>
<tr id="X03" class="c0">
<th scope="row">
<a href="/do/edit?id=X03">3</a>
</th>
<td>
Person 3
</td>
</tr>
<tr id="X04" class="c0">
<th scope="row">
<a href="/do/edit?id=X04">4</a>
</th>
<td>
Person 4
</td>
</tr>
<tr id="X05" class="c0">
<th scope="row">
<a href="/do/edit?id=X05">5</a>
</th>
<td>
Person 5
</td>
</tr>
<tr id="X06" class="c0">
<th scope="row">
<a href="/do/edit?id=X06">6</a>
</th>
<td>
Person 6
</td>
</tr>
<tr id="X07" class="c0">
<th scope="row">
<a href="/do/edit?id=X07">7</a>
</th>
<td>
Person 7
</td>
</tr>
<tr id="X08" class="c0">
<th scope="row">
<a href="/do/edit?id=X08">8</a>
</th>
<td>
Person 8
</td>
</tr>
<tr id="X09" class="c0">
<th scope="row">
<a href="/do/edit?id=X09">9</a>
</th>
<td>
Person 9
</td>
</tr>
<tr id="X10" class="c0">
<th scope="row">
<a href="/do/edit?id=X10">10</a>
</th>
<td>
Person 10
</td>
</tr>
<tr id="X11" class="c0">
<th scope="row">
<a href="/do/edit?id=X11">11</a>
</th>
<td>
Person 11
</td>
</tr>
<tr id="X12" class="c0">
<th scope="row">
<a href="/do/edit?id=X12">12</a>
</th>
<td>
Person 12
</td>
</tr>
<tr id="X13" class="c0">
<th scope="row">
<a href="/do/edit?id=X13">13</a>
</th>
<td>
Person 13
</td>
</tr>
<tr id="X14" class="c0">
<th scope="row">
<a href="/do/edit?id=X14">14</a>
</th>
<td>
Person 14
</td>
</tr>
<tr id="X15" class="c0">
<th scope="row">
<a href="/do/edit?id=X15">15</a>
</th>
<td>
Person 15
</td>
</tr>
<tr id="X16" class="c0">
<th scope="row">
<a href="/do/edit?id=X16">16</a>
</th>
<td>
Person 16
</td>
</tr>
<tr id="X17" class="c0">
<th scope="row">
<a href="/do/edit?id=X17">17</a>
</th>
<td>
Person 17
</td>
</tr>
<tr id="X18" class="c0">
<th scope="row">
<a href="/do/edit?id=X18">18</a>
</th>
<td>
Person 18
</td>
</tr>
<tr id="X19" class="c0">
<th scope="row">
<a href="/do/edit?id=X19">19</a>
</th>
<td>
Person 19
</td>
</tr>
<tr id="X20" class="c0">
<th scope="row">
<a href="/do/edit?id=X20">20</a>
</th>
<td>
Person 20
</td>
</tr>
<tr id="X21" class="c0">
<th scope="row">
<a href="/do/edit?id=X21">21</a>
</th>
<td>
Person 21
</td>
</tr>
<tr id="X22" class="c0">
<th scope="row">
<a href="/do/edit?id=X22">22</a>
</th>
<td>
Person 22
</td>
</tr>
<tr id="X23" class="c0">
<th scope="row">
<a href="/do/edit?id=X23">23</a>
</th>
<td>
Person 23
</td>
</tr>
<tr id="X24" class="c0">
<th scope="row">
<a href="/do/edit?id=X24">24</a>
</th>
<td>
Person 24
</td>
</tr>
<tr id="X25" class="c0">
<th scope="row">
<a href="/do/edit?id=X25">25</a>
</th>
<td>
Person 25
</td>
</tr>
<tr id="X26" class="c0">
<th scope="row">
<a href="/do/edit?id=X26">26</a>
</th>
<td>
Person 26
</td>
</tr>
<tr id="X27" class="c0">
<th scope="row">
<a href="/do/edit?id=X27">27</a>
</th>
<td>
Person 27
</td>
</tr>
<tr id="X28" class="c0">
<th scope="row">
<a href="/do/edit?id=X28">28</a>
</th>
<td>
Person 28
</td>
</tr>
<tr id="X29" class="c0">
<th scope="row">
<a href="/do/edit?id=X29">29</a>
</th>
<td>
Person 29
</td>
</tr>
<tr id="X30" class="c0">
<th scope="row">
<a href="/do/edit?id=X30">30</a>
</th>
<td>
Person 30
</td>
</tr>
<tr id="X31" class="c0">
<th scope="row">
<a href="/do/edit?id=X31">31</a>
</th>
<td>
Person 31
</td>
</tr>
<tr id="X32" class="c0">
<th scope="row">
<a href="/do/edit?id=X32">32</a>
</th>
<td>
Person 32
</td>
</tr>
<tr id="X33" class="c0">
<th scope="row">
<a href="/do/edit?id=X33">33</a>
</th>
<td>
Person 33
</td>
</tr>
<tr id="X34" class="c0">
<th scope="row">
<a href="/do/edit?id=X34">34</a>
</th>
<td>
Person 34
</td>
</tr>
<tr id="X35" class="c0">
<th scope="row">
<a href="/do/edit?id=X35">35</a>
</th>
<td>
Person 35
</td>
</tr>
<tr id="X36" class="c0">
<th scope="row">
<a href="/do/edit?id=X36">36</a>
</th>
<td>
Person 36
</td>
</tr>
<tr id="X37" class="c0">
<th scope="row">
<a href="/do/edit?id=X37">37</a>
</th>
<td>
Person 37
</td>
</tr>
<tr id="X38" class="c0">
<th scope="row">
<a href="/do/edit?id=X38">38</a>
</th>
<td>
Person 38
</td>
</tr>
<tr id="X39" class="c0">
<th scope="row">
<a href="/do/edit?id=X39">39</a>
</th>
<td>
Person 39
</td>
</tr>
<tr id="X40" class="c0">
<th scope="row">
<a href="/do/edit?id=X40">40</a>
</th>
<td>
Person 40
</td>
</tr>
<tr id="X41" class="c0">
<th scope="row">
<a href="/do/edit?id=X41">41</a>
</th>
<td>
Person 41
</td>
</tr>
<tr id="X42" class="c0">
<th scope="row">
<a href="/do/edit?id=X42">42</a>
</th>
<td>
Person 42
</td>
</tr>
<tr id="X43" class="c0">
<th scope="row">
<a href="/do/edit?id=X43">43</a>
</th>
<td>
Person 43
</td>
</tr>
<tr id="X44" class="c0">
<th scope="row">
<a href="/do/edit?id=X44">44</a>
</th>
<td>
Person 44
</td>
</tr>
<tr id="X45" class="c0">
<th scope="row">
<a href="/do/edit?id=X45">45</a>
</th>
<td>
Person 45
</td>
</tr>
<tr id="X46" class="c0">
<th scope="row">
<a href="/do/edit?id=X46">46</a>
</th>
<td>
Person 46
</td>
</tr>
<tr id="X47" class="c0">
<th scope="row">
<a href="/do/edit?id=X47">47</a>
</th>
<td>
Person 47
</td>
</tr>
<tr id="X48" class="c0">
<th scope="row">
<a href="/do/edit?id=X48">48</a>
</th>
<td>
Person 48
</td>
</tr>
<tr id="X49" class="c0">
<th scope="row">
<a href="/do/edit?id=X49">49</a>
</th>
<td>
Person 49
</td>
</tr>
<tr id="X50" class="c0">
<th scope="row">
<a href="/do/edit?id=X50">50</a>
</th>
<td>
Person 50
</td>
</tr>
<tr id="X51" class="c0">
<th scope="row">
<a href="/do/edit?id=X51">51</a>
</th>
<td>
Person 51
</td>
</tr>
<tr id="X52" class="c0">
<th scope="row">
<a href="/do/edit?id=X52">52</a>
</th>
<td>
Person 52
</td>
</tr>
<tr id="X53" class="c0">
<th scope="row">
<a href="/do/edit?id=X53">53</a>
</th>
<td>
Person 53
</td>
</tr>
<tr id="X54" class="c0">
<th scope="row">
<a href="/do/edit?id=X54">54</a>
</th>
<td>
Person 54
</td>
</tr>
<tr id="X55" class="c0">
<th scope="row">
<a href="/do/edit?id=X55">55</a>
</th>
<td>
Person 55
</td>
</tr>
<tr id="X56" class="c0">
<th scope="row">
<a href="/do/edit?id=X56">56</a>
</th>
<td>
Person 56
</td>
</tr>
<tr id="X57" class="c0">
<th scope="row">
<a href="/do/edit?id=X57">57</a>
</th>
<td>
Person 57
</td>
</tr>
<tr id="X58" class="c0">
<th scope="row">
<a href="/do/edit?id=X58">58</a>
</th>
<td>
Person 58
</td>
</tr>
<tr id="X59" class="c0">
<th scope="row">
<a href="/do/edit?id=X59">59</a>
</th>
<td>
Person 59
</td>
</tr>
<tr id="X60" class="c0">
<th scope="row">
<a href="/do/edit?id=X60">60</a>
</th>
<td>
Person 60
</td>
</tr>
<tr id="X61" class="c0">
<th scope="row">
<a href="/do/edit?id=X61">61</a>
</th>
<td>
Person 61
</td>
</tr>
<tr id="X62" class="c0">
<th scope="row">
<a href="/do/edit?id=X62">62</a>
</th>
<td>
Person 62
</td>
</tr>
<tr id="X63" class="c0">
<th scope="row">
<a href="/do/edit?id=X63">63</a>
</th>
<td>
Person 63
</td>
</tr>
<tr id="X64" class="c0">
<th scope="row">
<a href="/do/edit?id=X64">64</a>
</th>
<td>
Person 64
</td>
</tr>
<tr id="X65" class="c0">
<th scope="row">
<a href="/do/edit?id=X65">65</a>
</th>
<td>
Person 65
</td>
</tr>
<tr id="X66" class="c0">
<th scope="row">
<a href="/do/edit?id=X66">66</a>
</th>
<td>
Person 66
</td>
</tr>
<tr id="X67" class="c0">
<th scope="row">
<a href="/do/edit?id=X67">67</a>
</th>
<td>
Person 67
</td>
</tr>
<tr id="X68" class="c0">
<th scope="row">
<a href="/do/edit?id=X68">68</a>
</th>
<td>
Person 68
</td>
</tr>
<tr id="X69" class="c0">
<th scope="row">
<a href="/do/edit?id=X69">69</a>
</th>
<td>
Person 69
</td>
</tr>
<tr id="X70" class="c0">
<th scope="row">
<a href="/do/edit?id=X70">70</a>
</th>
<td>
Person 70
</td>
</tr>
<tr id="X71" class="c0">
<th scope="row">
<a href="/do/edit?id=X71">71</a>
</th>
<td>
Person 71
</td>
</tr>
<tr id="X72" class="c0">
<th scope="row">
<a href="/do/edit?id=X72">72</a>
</th>
<td>
Person 72
</td>
</tr>
<tr id="X73" class="c0">
<th scope="row">
<a href="/do/edit?id=X73">73</a>
</th>
<td>
Person 73
</td>
</tr>
<tr id="X74" class="c0">
<th scope="row">
<a href="/do/edit?id=X74">74</a>
</th>
<td>
Person 74
</td>
</tr>
<tr id="X75" class="c0">
<th scope="row">
<a href="/do/edit?id=X75">75</a>
</th>
<td>
Person 75
</td>
</tr>
<tr id="X76" class="c0">
<th scope="row">
<a href="/do/edit?id=X76">76</a>
</th>
<td>
Person 76
</td>
</tr>
<tr id="X77" class="c0">
<th scope="row">
<a href="/do/edit?id=X77">77</a>
</th>
<td>
Person 77
</td>
</tr>
<tr id="X78" class="c0">
<th scope="row">
<a href="/do/edit?id=X78">78</a>
</th>
<td>
Person 78
</td>
</tr>
<tr id="X79" class="c0">
<th scope="row">
<a href="/do/edit?id=X79">79</a>
</th>
<td>
Person 79
</td>
</tr>
<tr id="X80" class="c0">
<th scope="row">
<a href="/do/edit?id=X80">80</a>
</th>
<td>
Person 80
</td>
</tr>
<tr id="X81" class="c0">
<th scope="row">
<a href="/do/edit?id=X81">81</a>
</th>
<td>
Person 81
</td>
</tr>
<tr id="X82" class="c0">
<th scope="row">
<a href="/do/edit?id=X82">82</a>
</th>
<td>
Person 82
</td>
</tr>
<tr id="X83" class="c0">
<th scope="row">
<a href="/do/edit?id=X83">83</a>
</th>
<td>
Person 83
</td>
</tr>
<tr id="X84" class="c0">
<th scope="row">
<a href="/do/edit?id=X84">84</a>
</th>
<td>
Person 84
</td>
</tr>
<tr id="X85" class="c0">
<th scope="row">
<a href="/do/edit?id=X85">85</a>
</th>
<td>
Person 85
</td>
</tr>
<tr id="X86" class="c0">
<th scope="row">
<a href="/do/edit?id=X86">86</a>
</th>
<td>
Person 86
</td>
</tr>
<tr id="X87" class="c0">
<th scope="row">
<a href="/do/edit?id=X87">87</a>
</th>
<td>
Person 87
</td>
</tr>
<tr id="X88" class="c0">
<th scope="row">
<a href="/do/edit?id=X88">88</a>
</th>
<td>
Person 88
</td>
</tr>
<tr id="X89" class="c0">
<th scope="row">
<a href="/do/edit?id=X89">89</a>
</th>
<td>
Person 89
</td>
</tr>
<tr id="X90" class="c0">
<th scope="row">
<a href="/do/edit?id=X90">90</a>
</th>
<td>
Person 90
</td>
</tr>
<tr id="X91" class="c0">
<th scope="row">
<a href="/do/edit?id=X91">91</a>
</th>
<td>
Person 91
</td>
</tr>
<tr id="X92" class="c0">
<th scope="row">
<a href="/do/edit?id=X92">92</a>
</th>
<td>
Person 92
</td>
</tr>
<tr id="X93" class="c0">
<th scope="row">
<a href="/do/edit?id=X93">93</a>
</th>
<td>
Person 93
</td>
</tr>
<tr id="X94" class="c0">
<th scope="row">
<a href="/do/edit?id=X94">94</a>
</th>
<td>
Person 94
</td>
</tr>
<tr id="X95" class="c0">
<th scope="row">
<a href="/do/edit?id=X95">95</a>
</th>
<td>
Person 95
</td>
</tr>
<tr id="X96" class="c0">
<th scope="row">
<a href="/do/edit?id=X96">96</a>
</th>
<td>
Person 96
</td>
</tr>
<tr id="X97" class="c0">
<th scope="row">
<a href="/do/edit?id=X97">97</a>
</th>
<td>
Person 97
</td>
</tr>
<tr id="X98" class="c0">
<th scope="row">
<a href="/do/edit?id=X98">98</a>
</th>
<td>
Person 98
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment