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>
