3.0.0 • Published 4 months ago
@saekitominaga/htmltablecellelement-ditto v3.0.0
Display table cells with ditto mark
Demo
Examples
<script type="importmap">
{
"imports": {
"@saekitominaga/htmltablecellelement-ditto": "...",
"text-metrics": "..."
}
}
</script>
<script type="module">
import TableCellDitto from '@saekitominaga/htmltablecellelement-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
)