georgV,
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.4;
color: #333;
background-color: #FFFACD;
padding: 0 5vw;
}
table {
margin: 1em 0;
border-collapse: collapse;
border: 0.1em solid #d6d6d6;
}
th,
td {
padding: 0.25em 0.5em 0.25em 1em;
vertical-align: text-top;
text-align: left;
text-indent: -0.5em;
background-color: #DCDCDC;
}
th {
vertical-align: bottom;
background-color: #666;
color: #fff;
}
tr:nth-child(even) th[scope=row] {
background-color: #f2f2f2;
}
tr:nth-child(odd) th[scope=row] {
background-color: #fff;
}
tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05);
}
tr:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.05);
}
th {
position: sticky;
top: 0;
z-index: 2;
text-align: center;
}
th[scope=row] {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
}
body {
padding-bottom: 120vh;
}
input {
width: 90px;
}
</style>
</head>
<body>
<p>Таблица</p>
<button onclick="cp()"><img src="icon.png" > Сохранить!</button>
<script>
var c, r, t
t = document.createElement('table');
document.body.append(t);
let thead = document.createElement('thead');
let title = ['один', 2, 3, 4, 5].map(txt => {
let th = document.createElement('th');
th.textContent = txt;
return th;
});
thead.append(...title);
t.append(thead);
for (let i = 0; i < 3; i++) {
r = t.insertRow();
for (let j = 0; j < 5; j++) {
c = r.insertCell();
c.innerHTML = `<td><input type="text" value="ячейка ${i} ${j}"></td>`;
}
}
function cp() {
let valueAll = Array.from(t.querySelectorAll('input'), ({
value
}) => value).join('<br>')
document.body.insertAdjacentHTML('beforeend', valueAll)
}
</script>
</body>
</html>