Last active
August 8, 2017 16:43
-
-
Save michael/0b0b141441b64a891e67bc90009c75bb to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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; | |
| } | |
| /* 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> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment