Display table cells with ditto mark

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/table-cell-ditto": "...",
      "text-metrics": "..."
    }
  }
</script>
<script type="module">
  import TableCellDitto from '@w0s/table-cell-ditto';

  for (const tableElement of document.querySelectorAll('.js-table-cell-ditto')) {
    const tableCellDitto = new TableCellDitto(tableElement, {
      mark: '"',
      th: true,
    });
    tableCellDitto.convert();
  }
</script>

<table class="js-table-cell-ditto">
  <thead>
    <tr>
      <th>header cell</th>
      <th>header cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>header cell</th>
      <td>data cell</td>
    </tr>
    <tr>
      <th>header cell</th>
      <td>data cell</td> <!-- This cell is replaced with an ditto mark -->
    </tr>
  </tbody>
</table>

NG cases

Complex tables are not supported.

| NG case | Code example | | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | | Horizontal joins by colspan attribute(rowspan attribute is supported) | <td colspan="2">cell</td> | | Cells with title attribute(it will be overwritten by this function) | <td title="Cell title">cell</td> | | Table with different font sizes for different cells | <td style="font-size:16px">cell</td><td style="font-size:20px">cell</td> | | Table with <th> element columns not uniformly positioned | <tr><th></th><td></td><td></td></tr><tr><th></th><th></th><td></td></tr> |

Constructor

new TableCellDitto(
  thisElement: HTMLTableElement,
  options?: Option
)

Parameters

Methods