Keep table cell widths on the fallback ghost of a dragged row

src/Sortable.js

@@ -916,6 +916,21 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 			css(ghostEl, 'zIndex', '100000');
 			css(ghostEl, 'pointerEvents', 'none');
 
+			// A positioned table row is no longer laid out by its table, so its cells
+			// would shrink to fit their content. Keep each cell's original width (#2455)
+			if (css(dragEl, 'display') === 'table-row') {
+				css(ghostEl, 'display', 'table');
+				css(ghostEl, 'tableLayout', 'fixed');
+
+				Array.prototype.forEach.call(dragEl.children, function (cell, i) {
+					let ghostCell = ghostEl.children[i];
+
+					if (ghostCell) {
+						css(ghostCell, 'box-sizing', 'border-box');
+						css(ghostCell, 'width', getRect(cell, true, PositionGhostAbsolutely, true, container).width);
+					}
+				});
+			}
 
 			Sortable.ghost = ghostEl;
 

tests/Sortable.test.js

@@ -384,3 +384,25 @@ test('Do not insert into empty list if outside emptyInsertThreshold', async brow
 		})
 		.expect(dragStartPosition.innerText).eql(dragEl.innerText);
 });
+
+
+fixture `Table rows`
+	.page `./table.html`;
+
+['tbody1', 'tbody2'].forEach(id => {
+	test(`Fallback ghost keeps the cell widths of the dragged row (#${id})`, async browser => {
+		const tbody = Selector(`#${id}`);
+		const dragEl = await tbody.child(0)();
+
+		await browser
+			.dragToElement(dragEl, tbody.child(2))
+			.expect(tbody.child(2).innerText).eql(dragEl.innerText);
+
+		const { row, ghost } = await browser.eval(() => window.cellWidths[id], { dependencies: { id } });
+
+		await browser.expect(ghost.length).eql(row.length);
+		for (let i = 0; i < row.length; i++) {
+			await browser.expect(Math.abs(ghost[i] - row[i])).lt(leeway);
+		}
+	});
+});

tests/table.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title></title>
+	<style>
+		table { width: 600px; }
+		td, th { border: 1px solid #333; padding: 4px; height: 40px; font-family: Helvetica; }
+		#table1 { table-layout: fixed; border-collapse: collapse; }
+	</style>
+</head>
+<body>
+
+<!-- Column widths come from <colgroup> -->
+<table id="table1">
+	<colgroup>
+		<col style="width: 100px">
+		<col style="width: 300px">
+		<col style="width: 200px">
+	</colgroup>
+	<tbody id="tbody1">
+		<tr><td>1</td><td>a</td><td>x</td></tr>
+		<tr><td>2</td><td>b</td><td>y</td></tr>
+		<tr><td>3</td><td>c</td><td>z</td></tr>
+	</tbody>
+</table>
+
+<!-- Column widths come from the header content (auto layout, separate borders) -->
+<table id="table2">
+	<thead>
+		<tr><th>#</th><th>A much longer header for the second column</th><th>Third</th></tr>
+	</thead>
+	<tbody id="tbody2">
+		<tr><td>1</td><td>a</td><td>x</td></tr>
+		<tr><td>2</td><td>b</td><td>y</td></tr>
+		<tr><td>3</td><td>c</td><td>z</td></tr>
+	</tbody>
+</table>
+
+
+<script src="../Sortable.js"></script>
+
+<script type="text/javascript">
+	window.cellWidths = {};
+
+	function widths(row) {
+		return Array.prototype.map.call(row.children, function (cell) {
+			return cell.getBoundingClientRect().width;
+		});
+	}
+
+	['tbody1', 'tbody2'].forEach(function (id) {
+		new Sortable(document.getElementById(id), {
+			forceFallback: true,
+			onStart: function (evt) {
+				window.cellWidths[id] = {
+					row: widths(evt.item),
+					ghost: widths(Sortable.ghost)
+				};
+			}
+		});
+	});
+</script>
+
+</body>
+</html>