After much deliberation, I ultimately determined that a CSS/HTML solution was unattainable, but accomplishing the task with JQuery was relatively straightforward.
$( "table.splittable" ).each( function() {
$(this).find("tr").first().children().each( function() {
this.setAttribute('width', this.offsetWidth);
} );
var hdrs = $(this).find("tr.move-header");
$(this).find("tr").each( function() {
var tr = this;
$( this.className.split(/\s+/) ).each( function() {
var match = this.match(/^move-to-(.*)$/);
if (match) {
var dest = $('#'+match[1]).get(0);
if (dest.childNodes.length == 0) {
var thead = document.createElement("thead");
dest.appendChild(thead);
hdrs.each( function() {
thead.appendChild(this.cloneNode(true));
} );
dest.appendChild(document.createElement("tfoot"));
dest = dest.appendChild(document.createElement("tbody"));
}
else dest = $(dest).find("tbody").get(0);
dest.appendChild(tr);
}
} );
} );
});
This specific script examines each table with the splittable class, ensuring they are fully rendered in the browser before fixing column widths by adding a width attribute based on optimal browser settings. It then identifies rows with the move-to-<em>something</em> class and relocates them to the table with a corresponding id of <em>something</em>. If the destination table lacks a <thead> element, any rows in the source table with the move-header class are duplicated there.
As a result, my approach involves placing content within a single table and inserting an empty placeholder table where subsequent line(s) should be moved:
<table class="splittable" id="table1">
<thead><tr class="move-header"><th>Name</th><th>Identifier</th></tr></thead>
<tbody>
<tr class="move-to-table1"><td>John Smith</td><td>A-64</td></tr>
<tr class="move-to-table2"><td>Xavier Ephraim Bloggs III</td><td>A-434-bcf</td></tr>
</tbody>
</table>
<p>Some text …</p>
<table class="table2"></table>
Once the JavaScript executes, the second table acquires a replica of the header, and the last line is transferred there. Both tables now possess identical column widths.
Admittedly, this method may appear somewhat messy and does not gracefully handle situations where JavaScript is disabled. Nevertheless, it represents the most suitable solution I have devised thus far.