Skip to content

Instantly share code, notes, and snippets.

@gcyrillus
Created May 24, 2013 17:10
Show Gist options
  • Save gcyrillus/5644996 to your computer and use it in GitHub Desktop.
Save gcyrillus/5644996 to your computer and use it in GitHub Desktop.
scrolling table ?, nop
/* scrolling table ?, nop */thead {background:#159}
thead th {position:relative;height:2.5em;vertical-align:middle;line-height:1em;padding:0;}
thead th div {background:inherit; position:fixed;left:auto;width:inherit;margin:0;text-indent:0.5em;top:auto;line-height:0.5em;z-index:2;}
#blocG {height:200px;overflow:auto;display:inline-block;position:relative;width:69.3em;}
#blocG:before { height:5em;position:fixed;content:'';width:68em;border:2px white solid;background:#159;}
div, body {margin:0;}
thead tr:first-of-type th div:before, thead tr + tr th div:after {content:'';position:absolute;height:5.1em;width:2px;background:white;margin:-2.65em -0.65em;}
thead tr + tr th div:after {margin:-0.65em 0em 0 -103%;}thead tr + tr th:first-of-type div:before{content:'';position:absolute;display:block;width:15.2em;height:2px;background:white;margin:-0.7em 0 0 -0em}
td {box-shadow:inset 0 0 0 1px;}
@media all and (max-width:2700px) {html {font-size:19px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:18px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:17px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:16px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:14px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:11px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:10px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}
<div id="blocTableaux">
<div id="blocG">
<table id="tabG">
<colgroup><col style="width:2em"/>
<col style="width:2em"/><col style="width:5em"/><col style="width:4em"/><col style="width:4em"/><col style="width:6em"/><col style="width:5em"/><col style="width:14em"/><col style="width:10em"/><col style="width:6em"/><col style="width:4em"/><col style="width:5em"/>
</colgroup>
<thead>
<tr><th rowspan="2"><div>a</div></th><th rowspan="2"><div>b</div></th><th rowspan="2"><div>Num OF</div></th><th rowspan="2"><div>Seq OF</div></th><th rowspan="2"><div>Article</div></th><th rowspan="2"><div>Qté prévue</div></th><th rowspan="2"><div>Qté revue</div></th><th rowspan="2"><div>Composant</div></th><th rowspan="2"><div>Restant à assigner</div></th><th colspan="3"><div>Assignation HU</div></th></tr>
<tr><th><div>Qté totale</div></th><th><div>N° HU</div></th><th><div>Quantité</div></th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
</table>
</div>
</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment