diff --git a/src/components/DataTable/DataTable.css b/src/components/DataTable/DataTable.css
index c0e57f0..6559b37 100644
--- a/src/components/DataTable/DataTable.css
+++ b/src/components/DataTable/DataTable.css
@@ -21,7 +21,15 @@
 }
 
 .data-table__table {
-  width: 100%;
+  /*
+   * A user-resized column is an explicit layout contract. `width: 100%`
+   * lets the automatic table layout algorithm shrink that contract back to
+   * the scroll container, leaving a 600px header rendered at a much smaller
+   * width. Size to the content/declared columns instead, while retaining a
+   * full-width table when those columns fit the container.
+   */
+  width: max-content;
+  min-width: 100%;
   border-collapse: collapse;
   table-layout: auto;
 }
diff --git a/src/components/DataTable/DataTable.styles.test.ts b/src/components/DataTable/DataTable.styles.test.ts
index bc368ba..6ca0360 100644
--- a/src/components/DataTable/DataTable.styles.test.ts
+++ b/src/components/DataTable/DataTable.styles.test.ts
@@ -67,6 +67,14 @@ function contrast(a: Rgba, b: Rgba): number {
 }
 
 describe("DataTable resize grip styles", () => {
+  it("keeps declared column widths when the table overflows its local scroll container", () => {
+    expect(COMPONENT_CSS).toMatch(
+      /\.data-table__table\s*{[\s\S]*width:\s*max-content;/,
+    );
+    expect(COMPONENT_CSS).toMatch(/\.data-table__table\s*{[\s\S]*min-width:\s*100%;/);
+    expect(COMPONENT_CSS).toMatch(/\.data-table\s*{[\s\S]*overflow-x:\s*auto;/);
+  });
+
   it("reserves a token-sized 24px-or-larger target outside header content", () => {
     expect(COMPONENT_CSS).toMatch(
       /\.data-table__cell--resizable\s*{[\s\S]*padding-inline-end/,