htmlhtml-tabletextinput

input boxes in table header not showing contents

I have a tall html table. When it prints on two pages, the thead is repeated, like I expect. The problem is that my thead contains a text input field, and this is not repeated. Shouldn't the text input field show its contents every time the thead is displayed? How can I make that happen?

Here's an example:

<!doctype html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <table>
            <thead><tr><th>Name: <input type="text"></th></tr></thead>
            <tbody>
                <tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr>
                <tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr>
                <tr><td>8</td></tr><tr><td>9</td></tr>
                <tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr>
                <tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr>
                <tr><td>8</td></tr><tr><td>9</td></tr>
                <tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr>
                <tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr>
                <tr><td>8</td></tr><tr><td>9</td></tr>
                <tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr>
                <tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr>
                <tr><td>8</td></tr><tr><td>9</td></tr>
                <tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr>
                <tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr>
                <tr><td>8</td></tr><tr><td>9</td></tr>
            </tbody>
        </table>
    </body>
</html>

When I enter something into the input field and attempt to print, I see:

code output

so that the text input that appears in the first header does not repeat in the second header, even though the header does clearly repeat.

This sounds similar to input boxes in table header not working, but that didn't provide a complete example, and may have been caused by PHP or jQuery (it's not clear to me).

Solution

  • In case it won't work (cross-browser) by setting an appearance, here's a workaround that takes the input value and inserts it into a span after the input field. Combined with a tiny print stylesheet, that hides the input field and shows the span instead, this should give the desired result.

    I didn't bother to "undo" the changes via an afterprint handler here - the spans will be created only once, and are hidden in non-print view. Only the content needs updating, if you were to print repeatedly, and the beforeprint handler will do that.

    Maybe you'll want to apply additional styles to the spans - perhaps make them inline-block and set a width, or apply white-space to prevent the text from breaking.

    window.addEventListener('beforeprint', (event) => {
  document.querySelectorAll('thead input').forEach((input) => {
    let span = input.nextElementSibling;
    if (!span || !span.classList.contains('inputclone')) {
      span = document.createElement('span');
      span.classList.add('inputclone');
      input.after(span);
    }
    span.innerText = input.value;
  });
});

self.print();
    .inputclone {
  display: none;
}
@media print {
  thead {
    input {
      display: none;
    }
    .inputclone {
      display: inline;
      font-weight: normal;
    }
  }
}
    <!doctype html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <table>
            <thead><tr><th>Name: <input type="text" value="Foobar"></th></tr></thead>
            <tbody>
                <tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr>
                <tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr>
                <tr><td>8</td></tr><tr><td>9</td></tr>
                <tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr>
                <tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr>
                <tr><td>8</td></tr><tr><td>9</td></tr>
                <tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr>
                <tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr>
                <tr><td>8</td></tr><tr><td>9</td></tr>
                <tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr>
                <tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr>
                <tr><td>8</td></tr><tr><td>9</td></tr>
                <tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr>
                <tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr>
                <tr><td>8</td></tr><tr><td>9</td></tr>
            </tbody>
        </table>
    </body>
</html>