diff --git a/examples/angular/table/src/app/app.component.ts b/examples/angular/table/src/app/app.component.ts
index a90d2752e..24cb5ab7c 100644
--- a/examples/angular/table/src/app/app.component.ts
+++ b/examples/angular/table/src/app/app.component.ts
@@ -25,91 +25,107 @@ import { makeData, type Person } from './make-data'
   imports: [FlexRenderDirective],
   template: `
     <p>
-      For tables, the basis for the offset of the translate css function is from
-      the row's initial position itself. Because of this, we need to calculate
-      the translateY pixel count different and base it off the the index.
+      Table rows can't be absolutely positioned, so only the visible rows are
+      rendered, with a spacer row above and below them. The spacers keep the
+      table as tall as all of its rows, so the sticky header stays in place
+      while scrolling.
     </p>
     <br />
 
     <div #scrollElement class="list scroll-container">
-      <div [style.height.px]="virtualizer.getTotalSize()">
-        <table>
-          <thead>
-            @for (
-              headerGroup of table.getHeaderGroups();
-              track headerGroup.id
-            ) {
-              <tr>
-                @for (header of headerGroup.headers; track header.id) {
-                  <th
-                    [attr.colspan]="header.colSpan"
-                    [style.width.px]="header.getSize()"
-                  >
-                    @if (!header.isPlaceholder) {
-                      <div
-                        [class.cursor-pointer]="header.column.getCanSort()"
-                        [class.select-none]="header.column.getCanSort()"
-                        (click)="
-                          header.column.getToggleSortingHandler()?.($event)
-                        "
-                      >
-                        <ng-container
-                          *flexRender="
-                            header.column.columnDef.header;
-                            props: header.getContext();
-                            let headerText
-                          "
-                        >
-                          <span>{{ headerText }}</span>
-                          {{ getSortIcon(header.column.getIsSorted()) }}
-                        </ng-container>
-                      </div>
-                    }
-                  </th>
-                }
-              </tr>
-            }
-          </thead>
-          <tbody>
-            @for (
-              virtualRow of virtualizer.getVirtualItems();
-              track data[virtualRow.index].id
-            ) {
-              <tr
-                [style.height.px]="virtualRow.size"
-                [style.transform]="
-                  'translateY(' +
-                  (virtualRow.start - $index * virtualRow.size) +
-                  'px)'
-                "
-              >
-                @for (
-                  cell of rows()[virtualRow.index].getVisibleCells();
-                  track cell.id
-                ) {
-                  <td>
-                    <ng-container
-                      *flexRender="
-                        cell.column.columnDef.cell;
-                        props: cell.getContext();
-                        let cellText
+      <table>
+        <thead>
+          @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
+            <tr>
+              @for (header of headerGroup.headers; track header.id) {
+                <th
+                  [attr.colspan]="header.colSpan"
+                  [style.width.px]="header.getSize()"
+                >
+                  @if (!header.isPlaceholder) {
+                    <div
+                      [class.cursor-pointer]="header.column.getCanSort()"
+                      [class.select-none]="header.column.getCanSort()"
+                      (click)="
+                        header.column.getToggleSortingHandler()?.($event)
                       "
                     >
-                      <span>{{ cellText }}</span>
-                    </ng-container>
-                  </td>
-                }
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
+                      <ng-container
+                        *flexRender="
+                          header.column.columnDef.header;
+                          props: header.getContext();
+                          let headerText
+                        "
+                      >
+                        <span>{{ headerText }}</span>
+                        {{ getSortIcon(header.column.getIsSorted()) }}
+                      </ng-container>
+                    </div>
+                  }
+                </th>
+              }
+            </tr>
+          }
+        </thead>
+        <tbody>
+          @if (paddingTop() > 0) {
+            <tr>
+              <td
+                [attr.colspan]="table.getVisibleLeafColumns().length"
+                [style.height.px]="paddingTop()"
+              ></td>
+            </tr>
+          }
+          @for (
+            virtualRow of virtualizer.getVirtualItems();
+            track data[virtualRow.index].id
+          ) {
+            <tr [style.height.px]="virtualRow.size">
+              @for (
+                cell of rows()[virtualRow.index].getVisibleCells();
+                track cell.id
+              ) {
+                <td>
+                  <ng-container
+                    *flexRender="
+                      cell.column.columnDef.cell;
+                      props: cell.getContext();
+                      let cellText
+                    "
+                  >
+                    <span>{{ cellText }}</span>
+                  </ng-container>
+                </td>
+              }
+            </tr>
+          }
+          @if (paddingBottom() > 0) {
+            <tr>
+              <td
+                [attr.colspan]="table.getVisibleLeafColumns().length"
+                [style.height.px]="paddingBottom()"
+              ></td>
+            </tr>
+          }
+        </tbody>
+      </table>
     </div>
   `,
   styles: `
     .scroll-container {
       height: 600px;
       overflow: auto;
+      overflow-anchor: none;
+    }
+
+    table {
+      border-collapse: collapse;
+    }
+
+    thead {
+      position: sticky;
+      top: 0;
+      background: white;
     }
   `,
 })
@@ -191,4 +207,18 @@ export class AppComponent {
     estimateSize: () => 34,
     overscan: 20,
   }))
+
+  // Height of the spacer rows rendered above and below the visible rows
+  paddingTop = computed(() => {
+    const virtualRows = this.virtualizer.getVirtualItems()
+    return virtualRows.length > 0 ? virtualRows[0].start : 0
+  })
+
+  paddingBottom = computed(() => {
+    const virtualRows = this.virtualizer.getVirtualItems()
+    return virtualRows.length > 0
+      ? this.virtualizer.getTotalSize() -
+          virtualRows[virtualRows.length - 1].end
+      : 0
+  })
 }
diff --git a/examples/react/table/src/index.css b/examples/react/table/src/index.css
index c117a3a78..505f669ea 100644
--- a/examples/react/table/src/index.css
+++ b/examples/react/table/src/index.css
@@ -16,4 +16,15 @@ body {
 .container {
   height: 600px;
   overflow: auto;
+  overflow-anchor: none;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+thead {
+  position: sticky;
+  top: 0;
+  background: white;
 }
diff --git a/examples/react/table/src/main.tsx b/examples/react/table/src/main.tsx
index 0bdbe7d69..ea7a484d8 100644
--- a/examples/react/table/src/main.tsx
+++ b/examples/react/table/src/main.tsx
@@ -86,74 +86,87 @@ function ReactTableVirtualized() {
     overscan: 20,
   })
 
+  const virtualRows = virtualizer.getVirtualItems()
+
+  // Height of the spacer rows rendered above and below the visible rows
+  const [paddingTop, paddingBottom] =
+    virtualRows.length > 0
+      ? [
+          virtualRows[0].start,
+          virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end,
+        ]
+      : [0, 0]
+
+  const columnCount = table.getVisibleLeafColumns().length
+
   return (
     <div ref={parentRef} className="container">
-      <div style={{ height: `${virtualizer.getTotalSize()}px` }}>
-        <table>
-          <thead>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
+      <table>
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <th
+                    key={header.id}
+                    colSpan={header.colSpan}
+                    style={{ width: header.getSize() }}
+                  >
+                    {header.isPlaceholder ? null : (
+                      <div
+                        {...{
+                          className: header.column.getCanSort()
+                            ? 'cursor-pointer select-none'
+                            : '',
+                          onClick: header.column.getToggleSortingHandler(),
+                        }}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                        {{
+                          asc: ' 🔼',
+                          desc: ' 🔽',
+                        }[header.column.getIsSorted() as string] ?? null}
+                      </div>
+                    )}
+                  </th>
+                )
+              })}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {paddingTop > 0 && (
+            <tr>
+              <td colSpan={columnCount} style={{ height: paddingTop }} />
+            </tr>
+          )}
+          {virtualRows.map((virtualRow) => {
+            const row = rows[virtualRow.index]
+            return (
+              <tr key={row.id} style={{ height: `${virtualRow.size}px` }}>
+                {row.getVisibleCells().map((cell) => {
                   return (
-                    <th
-                      key={header.id}
-                      colSpan={header.colSpan}
-                      style={{ width: header.getSize() }}
-                    >
-                      {header.isPlaceholder ? null : (
-                        <div
-                          {...{
-                            className: header.column.getCanSort()
-                              ? 'cursor-pointer select-none'
-                              : '',
-                            onClick: header.column.getToggleSortingHandler(),
-                          }}
-                        >
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )}
-                          {{
-                            asc: ' 🔼',
-                            desc: ' 🔽',
-                          }[header.column.getIsSorted() as string] ?? null}
-                        </div>
+                    <td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
                       )}
-                    </th>
+                    </td>
                   )
                 })}
               </tr>
-            ))}
-          </thead>
-          <tbody>
-            {virtualizer.getVirtualItems().map((virtualRow, index) => {
-              const row = rows[virtualRow.index]
-              return (
-                <tr
-                  key={row.id}
-                  style={{
-                    height: `${virtualRow.size}px`,
-                    transform: `translateY(${
-                      virtualRow.start - index * virtualRow.size
-                    }px)`,
-                  }}
-                >
-                  {row.getVisibleCells().map((cell) => {
-                    return (
-                      <td key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </td>
-                    )
-                  })}
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
-      </div>
+            )
+          })}
+          {paddingBottom > 0 && (
+            <tr>
+              <td colSpan={columnCount} style={{ height: paddingBottom }} />
+            </tr>
+          )}
+        </tbody>
+      </table>
     </div>
   )
 }
@@ -162,10 +175,10 @@ function App() {
   return (
     <div>
       <p>
-        For tables, the basis for the offset of the translate css function is
-        from the row's initial position itself. Because of this, we need to
-        calculate the translateY pixel count differently and base it off the
-        index.
+        Table rows can't be absolutely positioned, so only the visible rows are
+        rendered, with a spacer row above and below them. The spacers keep the
+        table as tall as all of its rows, so the sticky header stays in place
+        while scrolling.
       </p>
       <ReactTableVirtualized />
       <br />
diff --git a/examples/svelte/table/src/App.svelte b/examples/svelte/table/src/App.svelte
index 427dcea2a..d91358fcd 100644
--- a/examples/svelte/table/src/App.svelte
+++ b/examples/svelte/table/src/App.svelte
@@ -94,69 +94,89 @@
     estimateSize: () => 34,
     overscan: 20,
   })
+
+  $: virtualRows = $virtualizer.getVirtualItems()
+
+  // Height of the spacer rows rendered above and below the visible rows
+  $: paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0
+  $: paddingBottom =
+    virtualRows.length > 0
+      ? $virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+      : 0
+
+  $: columnCount = $table.getVisibleLeafColumns().length
 </script>
 
 <main>
   <p>
-    For tables, the basis for the offset of the translate css function is from
-    the row's initial position itself. Because of this, we need to calculate the
-    translateY pixel count differently and base it off the index.
+    Table rows can't be absolutely positioned, so only the visible rows are
+    rendered, with a spacer row above and below them. The spacers keep the table
+    as tall as all of its rows, so the sticky header stays in place while
+    scrolling.
   </p>
 
   <div class="list scroll-container" bind:this={virtualListEl}>
-    <div style="position: relative; height: {$virtualizer.getTotalSize()}px;">
-      <table>
-        <thead>
-          {#each $table.getHeaderGroups() as headerGroup (headerGroup.id)}
-            <tr>
-              {#each headerGroup.headers as header (header.id)}
-                <th
-                  colspan={header.colSpan}
-                  style="width: {header.getSize()}px;"
-                >
-                  {#if !header.isPlaceholder}
-                    <button
-                      class:sortable-header={header.column.getCanSort()}
-                      disabled={!header.column.getCanSort()}
-                      on:click={header.column.getToggleSortingHandler()}
-                    >
-                      <svelte:component
-                        this={flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                      />
-                      {#if header.column.getIsSorted()}
-                        {header.column.getIsSorted() === 'desc' ? ' 🔽' : ' 🔼'}
-                      {/if}
-                    </button>
-                  {/if}
-                </th>
-              {/each}
-            </tr>
-          {/each}
-        </thead>
-        <tbody>
-          {#each $virtualizer.getVirtualItems() as row, idx (row.index)}
-            <tr
-              style="height: {row.size}px; transform: translateY({row.start -
-                idx * row.size}px);"
-            >
-              {#each rows[row.index].getVisibleCells() as cell (cell.id)}
-                <td>
-                  <svelte:component
-                    this={flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext(),
-                    )}
-                  />
-                </td>
-              {/each}
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
+    <table>
+      <thead>
+        {#each $table.getHeaderGroups() as headerGroup (headerGroup.id)}
+          <tr>
+            {#each headerGroup.headers as header (header.id)}
+              <th colspan={header.colSpan} style="width: {header.getSize()}px;">
+                {#if !header.isPlaceholder}
+                  <button
+                    class:sortable-header={header.column.getCanSort()}
+                    disabled={!header.column.getCanSort()}
+                    on:click={header.column.getToggleSortingHandler()}
+                  >
+                    <svelte:component
+                      this={flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                    />
+                    {#if header.column.getIsSorted()}
+                      {header.column.getIsSorted() === 'desc' ? ' 🔽' : ' 🔼'}
+                    {/if}
+                  </button>
+                {/if}
+              </th>
+            {/each}
+          </tr>
+        {/each}
+      </thead>
+      <tbody>
+        {#if paddingTop > 0}
+          <tr>
+            <td
+              colspan={columnCount}
+              style="height: {paddingTop}px; padding: 0;"
+            ></td>
+          </tr>
+        {/if}
+        {#each virtualRows as row (row.index)}
+          <tr style="height: {row.size}px;">
+            {#each rows[row.index].getVisibleCells() as cell (cell.id)}
+              <td>
+                <svelte:component
+                  this={flexRender(
+                    cell.column.columnDef.cell,
+                    cell.getContext(),
+                  )}
+                />
+              </td>
+            {/each}
+          </tr>
+        {/each}
+        {#if paddingBottom > 0}
+          <tr>
+            <td
+              colspan={columnCount}
+              style="height: {paddingBottom}px; padding: 0;"
+            ></td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
   </div>
 </main>
 
@@ -176,6 +196,15 @@
     height: 600px;
     width: 100%;
     overflow: auto;
+    overflow-anchor: none;
+  }
+  table {
+    border-collapse: collapse;
+  }
+  thead {
+    position: sticky;
+    top: 0;
+    background: white;
   }
   .sortable-header {
     cursor: pointer;
diff --git a/examples/vue/table/src/App.vue b/examples/vue/table/src/App.vue
index ba12ad428..d3ca5a0fc 100644
--- a/examples/vue/table/src/App.vue
+++ b/examples/vue/table/src/App.vue
@@ -1,71 +1,77 @@
 <template>
   <div>
     <p>
-      For tables, the basis for the offset of the translate css function is from
-      the row's initial position itself. Because of this, we need to calculate
-      the translateY pixel count differently and base it off the index.
+      Table rows can't be absolutely positioned, so only the visible rows are
+      rendered, with a spacer row above and below them. The spacers keep the
+      table as tall as all of its rows, so the sticky header stays in place
+      while scrolling.
     </p>
 
     <div ref="parentRef" class="container">
-      <div :style="{ height: `${totalSize}px` }">
-        <table>
-          <thead>
-            <tr
-              v-for="headerGroup in table.getHeaderGroups()"
-              :key="headerGroup.id"
+      <table>
+        <thead>
+          <tr
+            v-for="headerGroup in table.getHeaderGroups()"
+            :key="headerGroup.id"
+          >
+            <th
+              v-for="header in headerGroup.headers"
+              :key="header.id"
+              :colspan="header.colSpan"
+              :style="{ width: `${header.getSize()}px` }"
             >
-              <th
-                v-for="header in headerGroup.headers"
-                :key="header.id"
-                :colspan="header.colSpan"
-                :style="{ width: `${header.getSize()}px` }"
-              >
-                <div
-                  v-if="!header.isPlaceholder"
-                  :class="[
-                    'text-left',
-                    header.column.getCanSort()
-                      ? 'cursor-pointer select-none'
-                      : '',
-                  ]"
-                  @click="
-                    getSortingHandler(
-                      $event,
-                      header.column.getToggleSortingHandler(),
-                    )
-                  "
-                >
-                  <FlexRender
-                    :render="header.column.columnDef.header"
-                    :props="header.getContext()"
-                  />
-                  <span v-if="header.column.getIsSorted() === 'asc'"> 🔼</span>
-                  <span v-if="header.column.getIsSorted() === 'desc'"> 🔽</span>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(virtualRow, index) in virtualRows"
-              :key="virtualRow.key"
-              :style="{
-                transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
-              }"
-            >
-              <td
-                v-for="cell in rows[virtualRow.index].getVisibleCells()"
-                :key="cell.id"
+              <div
+                v-if="!header.isPlaceholder"
+                :class="[
+                  'text-left',
+                  header.column.getCanSort()
+                    ? 'cursor-pointer select-none'
+                    : '',
+                ]"
+                @click="
+                  getSortingHandler(
+                    $event,
+                    header.column.getToggleSortingHandler(),
+                  )
+                "
               >
                 <FlexRender
-                  :render="cell.column.columnDef.cell"
-                  :props="cell.getContext()"
+                  :render="header.column.columnDef.header"
+                  :props="header.getContext()"
                 />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+                <span v-if="header.column.getIsSorted() === 'asc'"> 🔼</span>
+                <span v-if="header.column.getIsSorted() === 'desc'"> 🔽</span>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="paddingTop > 0">
+            <td :colspan="columnCount" :style="{ height: `${paddingTop}px` }" />
+          </tr>
+          <tr
+            v-for="virtualRow in virtualRows"
+            :key="virtualRow.key"
+            :style="{ height: `${virtualRow.size}px` }"
+          >
+            <td
+              v-for="cell in rows[virtualRow.index].getVisibleCells()"
+              :key="cell.id"
+            >
+              <FlexRender
+                :render="cell.column.columnDef.cell"
+                :props="cell.getContext()"
+              />
+            </td>
+          </tr>
+          <tr v-if="paddingBottom > 0">
+            <td
+              :colspan="columnCount"
+              :style="{ height: `${paddingBottom}px` }"
+            />
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </template>
@@ -177,4 +183,17 @@ const rowVirtualizer = useVirtualizer(rowVirtualizerOptions)
 const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 
 const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
+
+// Height of the spacer rows rendered above and below the visible rows
+const paddingTop = computed(() =>
+  virtualRows.value.length > 0 ? virtualRows.value[0].start : 0,
+)
+
+const paddingBottom = computed(() =>
+  virtualRows.value.length > 0
+    ? totalSize.value - virtualRows.value[virtualRows.value.length - 1].end
+    : 0,
+)
+
+const columnCount = computed(() => table.getVisibleLeafColumns().length)
 </script>
diff --git a/examples/vue/table/src/style.css b/examples/vue/table/src/style.css
index 7f784706f..9a1b9da09 100644
--- a/examples/vue/table/src/style.css
+++ b/examples/vue/table/src/style.css
@@ -16,6 +16,17 @@ body {
 .container {
   height: 600px;
   overflow: auto;
+  overflow-anchor: none;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+thead {
+  position: sticky;
+  top: 0;
+  background: white;
 }
 
 .cursor-pointer {