Skip to content

Instantly share code, notes, and snippets.

@michael

michael/table-with-scroller-side-by-side.html

Created August 8, 2017 17:04
Show Gist options
  • Save michael/cd5c48724ca4ad4bfa0697aa7f4b93c5 to your computer and use it in GitHub Desktop.
Save michael/cd5c48724ca4ad4bfa0697aa7f4b93c5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
table-with-scroller-side-by-side.html
<!DOCTYPE html>
<html>
<head>
<title>Spreadsheet Component Styles</title>
<meta charset="UTF-8">
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
<style>
/* Integration */
body {
overflow: hidden;
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
line-height: 1.5;
font-size: 13px;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.sc-scroll-container {
position: absolute;
top: 30px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: auto;
}
/* Spreadsheet Container Component */
.sc-spreadsheet-container {
position: absolute;
top: 30px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: auto;
}
/* Spreadsheet Component */
table.sc-spreadsheet-view {
border-collapse: collapse;
table-layout: fixed;
width: 400px;
}
/* SpreadsheetCell Component */
td.sc-spreadsheet-cell {
white-space: pre-wrap;
overflow-wrap: break-word;
border: 1px solid #ddd;
position: relative;
}
td.sc-spreadsheet-cell.sm-overflow {
position: relative;
overflow: visible;
}
/* SpreadsheetColumnLabel Component */
.sc-spreadsheet-column-label {
background: #eee;
border: 1px solid #ddd;
}
.sc-spreadsheet-row-label {
background: #eee;
border: 1px solid #ddd;
}
/* TextContent Component */
.sc-text-content {
padding: 5px;
}
/* ImageContent Component */
.sc-image-content {
z-index: 200;
position: absolute;
top: 0px;
left: 0px;
}
.sc-image-content > img {
display: block;
}
</style>
</head>
<body>
<div class="sc-spreadsheet-container">
<table id="spreadsheet" class="sc-spreadsheet-view">
<thead>
<tr>
<th class="sc-spreadsheet-column-label" style="width: 50px;"></th>
<th class="sc-spreadsheet-column-label" style="width: 200px;">A</th>
<th class="sc-spreadsheet-column-label" style="width: 100px;">B</th>
<th class="sc-spreadsheet-column-label" style="width: 100px;">C</th>
</tr>
</thead>
<tr>
<th class="sc-spreadsheet-row-label">1</th>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">Hello</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">alksjdflkadsf</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">asdfasdfasdkfjasdlkfajlsdkfjasdklfjalksdjflkasdj jlsdkfjasdklfjalksdjflkasdj</div></td>
</tr>
<tr>
<th class="sc-spreadsheet-row-label">2</th>
<td class="sc-spreadsheet-cell"><div class="sc-image-content"><img width="300" src="https://d1wn0q81ehzw6k.cloudfront.net/additional/thul/media/0e09cd9c1a159318?w=1200&h=600&crop=1"/></div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">alksjdflkadsf</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content"></div></td>
</tr>
<tr>
<th class="sc-spreadsheet-row-label">3</th>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">Hello</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">alksjdflkadsf</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">asdfasdfasdkfjasdlkfajlsdkfjasdklfjalksdjflkasdj jlsdkfjasdklfjalksdjflkasdj</div></td>
</tr>
<tr>
<th class="sc-spreadsheet-row-label">4</th>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">Hello</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">alksjdflkadsf</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">asdfasdfasdkfjasdlkfajlsdkfjasdklfjalksdjflkasdj jlsdkfjasdklfjalksdjflkasdj</div></td>
</tr>
<tr>
<th class="sc-spreadsheet-row-label">5</th>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">Hello</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">adsfa</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">ad ada</div></td>
</tr>
<tr>
<th class="sc-spreadsheet-row-label">6</th>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">Hello</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">adsfa</div></td>
<td class="sc-spreadsheet-cell"><div class="sc-text-content">ad ada</div></td>
</tr>
</table>
</div>
<div class="sc-scroll-container">
<div class="se-scrollable-content" style="height: 2000px;">asdfdsf</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment