@tiptap/prosemirror-tables

Version:

ProseMirror's rowspan/colspan tables component with ES6 support

github.com/prosemirror/prosemirror-tables

55 lines (49 loc) • 1.33 kB

HTML

<!doctype html>
<meta charset=utf8>
<title>Table demo</title>

<link rel=stylesheet href="node_modules/prosemirror-view/style/prosemirror.css">
<link rel=stylesheet href="node_modules/prosemirror-menu/style/menu.css">
<link rel=stylesheet href="node_modules/prosemirror-example-setup/style/style.css">
<link rel=stylesheet href="style/tables.css">
<link rel=stylesheet href="node_modules/prosemirror-gapcursor/style/gapcursor.css">
<link rel=stylesheet href="style/tables.css">
<style>
  body {
    max-width: 50em;
    font-family: Georgia;
  }
  .ProseMirror-menubar-wrapper {
    border: 1px solid silver;
    outline: none;
  }
  .ProseMirror {
    padding: 5px 15px;
  }
  .ProseMirror table {
    margin: 0;
  }
  .ProseMirror th, .ProseMirror td {
    min-width: 1em;
    border: 1px solid #ddd;
    padding: 3px 5px;
  }
  .ProseMirror .tableWrapper {
    margin: 1em 0;
  }
  .ProseMirror th {
    font-weight: bold;
    text-align: left;
  }
</style>

<h1>Table demo</h1>

<div style="display: none" id=content>
  <h2>Example content</h2>
  <p>The table:</p>
  <table>
    <tr><th colspan=3 data-colwidth="100,0,0">Wide header</td></tr>
    <tr><td>One</td><td>Two</td><td>Three</td></tr>
    <tr><td>Four</td><td>Five</td><td>Six</td></tr>
  </table>
</div>

<div id=editor></div>

<script src="demo_bundle.js"></script>