Navigation Menu

Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@gregorterrill
gregorterrill committed Jul 13, 2012
0 parents commit 69fbc27
Show file tree
Hide file tree
Showing 8 changed files with 573 additions and 0 deletions.
22 changes: 22 additions & 0 deletions .gitattributes
@@ -0,0 +1,22 @@
# Auto detect text files and perform LF normalization
* text=auto

# Custom for Visual Studio
*.cs diff=csharp
*.sln merge=union
*.csproj merge=union
*.vbproj merge=union
*.fsproj merge=union
*.dbproj merge=union

# Standard to msysgit
*.doc diff=astextplain
*.DOC diff=astextplain
*.docx diff=astextplain
*.DOCX diff=astextplain
*.dot diff=astextplain
*.DOT diff=astextplain
*.pdf diff=astextplain
*.PDF diff=astextplain
*.rtf diff=astextplain
*.RTF diff=astextplain
163 changes: 163 additions & 0 deletions .gitignore
@@ -0,0 +1,163 @@
#################
## Eclipse
#################

*.pydevproject
.project
.metadata
bin/
tmp/
*.tmp
*.bak
*.swp
*~.nib
local.properties
.classpath
.settings/
.loadpath

# External tool builders
.externalToolBuilders/

# Locally stored "Eclipse launch configurations"
*.launch

# CDT-specific
.cproject

# PDT-specific
.buildpath


#################
## Visual Studio
#################

## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.

# User-specific files
*.suo
*.user
*.sln.docstates

# Build results
[Dd]ebug/
[Rr]elease/
*_i.c
*_p.c
*.ilk
*.meta
*.obj
*.pch
*.pdb
*.pgc
*.pgd
*.rsp
*.sbr
*.tlb
*.tli
*.tlh
*.tmp
*.vspscc
.builds
*.dotCover

## TODO: If you have NuGet Package Restore enabled, uncomment this
#packages/

# Visual C++ cache files
ipch/
*.aps
*.ncb
*.opensdf
*.sdf

# Visual Studio profiler
*.psess
*.vsp

# ReSharper is a .NET coding add-in
_ReSharper*

# Installshield output folder
[Ee]xpress

# DocProject is a documentation generator add-in
DocProject/buildhelp/
DocProject/Help/*.HxT
DocProject/Help/*.HxC
DocProject/Help/*.hhc
DocProject/Help/*.hhk
DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html

# Click-Once directory
publish

# Others
[Bb]in
[Oo]bj
sql
TestResults
*.Cache
ClientBin
stylecop.*
~$*
*.dbmdl
Generated_Code #added for RIA/Silverlight projects

# Backup & report files from converting an old project file to a newer
# Visual Studio version. Backup files are not needed, because we have git ;-)
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML



############
## Windows
############

# Windows image file caches
Thumbs.db

# Folder config file
Desktop.ini


#############
## Python
#############

*.py[co]

# Packages
*.egg
*.egg-info
dist
build
eggs
parts
bin
var
sdist
develop-eggs
.installed.cfg

# Installer logs
pip-log.txt

# Unit test / coverage reports
.coverage
.tox

#Translations
*.mo

#Mr Developer
.mr.developer.cfg

# Mac crap
.DS_Store
3 changes: 3 additions & 0 deletions README.md
@@ -0,0 +1,3 @@
# Responsive Tables

This jQuery script applies column headers to each sub-item at a pre-defined breakpoint, allowing more data to be displayed on mobile devices with a limited screen width.
88 changes: 88 additions & 0 deletions css/style.css
@@ -0,0 +1,88 @@
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
margin: auto;
}
table {
width: 80%;
margin: auto;
font-size: 10.5px;
border-collapse: collapse;
}
table caption {
border: 1px solid #8c8468;
border-bottom: none;
font-weight: bold;
color: #dbdab7;
font-size: 1.3em;
font-variant: small-caps;
text-align: left;
background: #6f6852;
padding: 10px;
}
table thead {
background: #8c8468;
font-weight: bold;
}
table thead td,
table thead th {
border: 1px solid #8c8468;
text-align: right;
padding: 4px 10px;
}
table tbody td,
table tbody th {
border: 1px solid #8c8468;
text-align: right;
padding: 4px 10px;
background-color: #dbdab7;
}
table tbody th[scope="rowGroup"] {
background-color: #c4c49c;
text-align: left;
}
table tbody th[scope="rowGroup"].altColor {
background-color: #6f6852;
color: #dbdab7;
}
table tbody th[scope="row"] {
text-align: left;
font-weight: normal;
padding-left: 18px;
background-color: #c4c49c;
}
table tbody .itemDescRow th {
background-color: #8c8468;
text-align: left;
font-weight: normal;
}
table tbody .itemColHeaders th {
background-color: #c4c49c;
}
h1,
p {
margin-left: 10%;
}
h1 {
margin-bottom: 0;
}
a {
text-decoration: none;
color: #6f6852;
}
a:visited {
color: #6f6852;
}
a:hover,
a:active,
a:focus {
color: #8c8468;
text-decoration: underline;
}
p {
width: 80%;
max-width: 660px;
font-size: 0.875em;
line-height: 1.4em;
margin-top: 0;
}
102 changes: 102 additions & 0 deletions index.html
@@ -0,0 +1,102 @@
<!doctype html>
<html>
<head>
<title>Responsive Tables</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
<h1>Responsive Tables</h1>
<p>by <a href="http://www.twitter.com/GregorTerrill">@GregorTerrill</a></p>

<a href="https://github.com/gregorterrill/ResponsiveTables"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

<p>This jQuery script applies column headers to each sub-item at a pre-defined breakpoint, allowing more data to be displayed on mobile devices with a limited screen width.</p>
<p>This demo uses <a href="https://github.com/louisremi/jquery-smartresize/">debounced window resizing</a> by <a href="http://www.twitter.com/louis_remi/">@louis_remi</a> to decrease the frequency of resize events across different browsers.
<p>Each table that is to be made responsive requires the class name <em>responsiveTable</em>. Tables need to be properly scoped in order for the color swapping to function correctly.</p>
<p>The default breakpoint is 500px.</p>
<p>Resize the browser window to see the change occur.</p>

<table class="responsiveTable">
<caption>Number of Yearly Events Requiring Additional Funding</caption>
<thead>
<tr>
<td></td>
<th scope="col" id="C1">2008 - 09</th>
<th scope="col" id="C2">2009 - 10</th>
<th scope="col" id="C3">2010 - 11</th>
<th scope="col" id="C4">2011 - 12</th>
<th scope="col" id="C5">2012 - 13</th>
<th scope="col" id="C6">2013 - 14</th>
<th scope="col" id="C7">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="8" scope="rowgroup" id="G1">Mandatory Yearly Events</td>
</tr>
<tr>
<th scope="row" id="R1">Resource Management Soirees in the Sub-Saharan Party Zone</th>
<td headers="C1 G1 R1">4</td>
<td headers="C2 G1 R1">6</td>
<td headers="C3 G1 R1">2</td>
<td headers="C4 G1 R1">8</td>
<td headers="C5 G1 R1">6</td>
<td headers="C6 G1 R1">7</td>
<td headers="C7 G1 R1">33</td>
</tr>
<tr>
<th scope="row" id="R2">Marginalized Animal Species Benefits for the Siberian Zoo</th>
<td headers="C1 G1 R2">2</td>
<td headers="C2 G1 R2">4</td>
<td headers="C3 G1 R2">6</td>
<td headers="C4 G1 R2">4</td>
<td headers="C5 G1 R2">2</td>
<td headers="C6 G1 R2">6</td>
<td headers="C7 G1 R2">24</td>
</tr>
<tr>
<th scope="row" id="R3">Gallery Openings for Underappreciated Fringe Artists</th>
<td headers="C1 G1 R3">1</td>
<td headers="C2 G1 R3">1</td>
<td headers="C3 G1 R3">6</td>
<td headers="C4 G1 R3">8</td>
<td headers="C5 G1 R3">6</td>
<td headers="C6 G1 R3">6</td>
<td headers="C7 G1 R3">28</td>
</tr>
<tr>
<th colspan="8" scope="rowgroup" id="G2">Unforeseen Dinners and Other Meals</td>
</tr>
<tr>
<th scope="row" id="R4">International Finger-Food Sampling Lunch Galas</th>
<td headers="C1 G2 R4">3</td>
<td headers="C2 G2 R4">5</td>
<td headers="C3 G2 R4">6</td>
<td headers="C4 G2 R4">2</td>
<td headers="C5 G2 R4">8</td>
<td headers="C6 G2 R4">2</td>
<td headers="C7 G2 R4">26</td>
</tr>
<tr>
<th scope="row" id="R5">NASCAR Barbeques for Visiting American Diplomats</th>
<td headers="C1 G2 R5">1</td>
<td headers="C2 G2 R5">2</td>
<td headers="C3 G2 R5">6</td>
<td headers="C4 G2 R5">4</td>
<td headers="C5 G2 R5">2</td>
<td headers="C6 G2 R5">1</td>
<td headers="C7 G2 R5">16</td>
</tr>
</tbody>
</table>

<br />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="js/debouncedresize.js"></script>
<script src="js/responsivetables.js"></script>

</body>
</html>

0 comments on commit 69fbc27

Please sign in to comment.