diff --git a/src/components/table/README.md b/src/components/table/README.md
index 7a490af41f6..84a0251119a 100644
--- a/src/components/table/README.md
+++ b/src/components/table/README.md
@@ -349,8 +349,8 @@ details.
 | `no-footer-sorting`  | Boolean           | When `foot-clone` is true and the table is sortable, disables the sorting icons and click behaviour on the footer heading cells. Refer to the [Sorting](#sorting) section below for more details.                                                                                                                                              |
 | `no-border-collapse` | Boolean           | Disables the default of collapsing of the table borders. Mainly for use with [sticky headers](#sticky-headers) and/or [sticky columns](#sticky-columns). Will cause the appearance of double borders in some situations.                                                                                                                       |
 
-**Note:** table style options `fixed`, `stacked`, `caption-top`, `no-border-collapse`, sticky
-headers, sticky columns, and the table sorting feature, all require BootstrapVue's custom CSS.
+**Note:** The table style options `fixed`, `stacked`, `caption-top`, `no-border-collapse`, sticky
+headers, sticky columns and the table sorting feature, all require BootstrapVue's custom CSS.
 
 **Example: Basic table styles**
 
@@ -609,8 +609,8 @@ breakpoint values `'sm'`, `'md'`, `'lg'`, or `'xl'`.
 Column header labels will be rendered to the left of each field value using a CSS `::before` pseudo
 element, with a width of 40%.
 
-The prop `stacked` takes precedence over the `responsive` prop, [`sticky-header`](#sticky-headers)
-props, and the [`stickyColumn`](#sticky-columns) field definition property.
+The `stacked` prop takes precedence over the [`sticky-header`](#sticky-headers) prop and the
+[`stickyColumn`](#sticky-columns) field definition property.
 
 **Example: Always stacked table**
 
@@ -1402,8 +1402,8 @@ set.
   wrapped inside a horizontally scrollable `<div>`.
 - When you have multiple columns that are set as `stickyColumn`, the columns will stack over each
   other visually, and the left-most sticky columns may "peek" out from under the next sticky column.
-  To get around this behaviour, make sure your latter stickyColumns are the same width or wider than
-  previous sticky columns.
+  To get around this behaviour, make sure your latter sticky columns are the same width or wider
+  than previous sticky columns.
 - Bootstrap v4 uses the CSS style `border-collapse: collapsed` on table elements. This prevents any
   borders on the sticky columns from "sticking" to the column, and hence those borders will scroll
   when the body scrolls. To get around this issue, set the prop `no-border-collapse` on the table
diff --git a/src/components/table/helpers/mixin-table-renderer.js b/src/components/table/helpers/mixin-table-renderer.js
index 7a56ad2df25..0941861b216 100644
--- a/src/components/table/helpers/mixin-table-renderer.js
+++ b/src/components/table/helpers/mixin-table-renderer.js
@@ -51,9 +51,8 @@ export const tableRendererMixin = Vue.extend({
   computed: {
     // Layout related computed props
     isResponsive() {
-      let { responsive } = this
-      responsive = responsive === '' ? true : responsive
-      return this.isStacked ? false : responsive
+      const { responsive } = this
+      return responsive === '' ? true : responsive
     },
     isStickyHeader() {
       let { stickyHeader } = this
diff --git a/src/components/table/table-lite.spec.js b/src/components/table/table-lite.spec.js
index b30f9b86ccc..8808d5531d9 100644
--- a/src/components/table/table-lite.spec.js
+++ b/src/components/table/table-lite.spec.js
@@ -225,9 +225,12 @@ describe('table-lite', () => {
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('table-responsive')
     expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.find('table').classes()).toContain('table')
-    expect(wrapper.find('table').classes()).toContain('b-table')
-    expect(wrapper.find('table').classes().length).toBe(2)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes().length).toBe(2)
 
     wrapper.destroy()
   })
@@ -245,14 +248,17 @@ describe('table-lite', () => {
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('table-responsive-md')
     expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.find('table').classes()).toContain('table')
-    expect(wrapper.find('table').classes()).toContain('b-table')
-    expect(wrapper.find('table').classes().length).toBe(2)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes().length).toBe(2)
 
     wrapper.destroy()
   })
 
-  it('stacked has precedence over responsive', async () => {
+  it('stacked and responsive work together', async () => {
     const wrapper = mount(BTableLite, {
       propsData: {
         items: items1,
@@ -263,12 +269,16 @@ describe('table-lite', () => {
     })
 
     expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('TABLE')
-    expect(wrapper.classes()).not.toContain('table-responsive')
-    expect(wrapper.classes()).toContain('b-table-stacked')
-    expect(wrapper.classes()).toContain('table')
-    expect(wrapper.classes()).toContain('b-table')
-    expect(wrapper.classes().length).toBe(3)
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('table-responsive')
+    expect(wrapper.classes().length).toBe(1)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes()).toContain('b-table-stacked')
+    expect($table.classes().length).toBe(3)
 
     wrapper.destroy()
   })
@@ -281,6 +291,7 @@ describe('table-lite', () => {
         stacked: true
       }
     })
+
     expect(wrapper).toBeDefined()
     expect(wrapper.findAll('tbody > tr').length).toBe(2)
     const $trs = wrapper.findAll('tbody > tr').wrappers
diff --git a/src/components/table/table.spec.js b/src/components/table/table.spec.js
index ad7a8703cbe..40ecb8eb6aa 100644
--- a/src/components/table/table.spec.js
+++ b/src/components/table/table.spec.js
@@ -286,9 +286,12 @@ describe('table', () => {
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('table-responsive')
     expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.find('table').classes()).toContain('table')
-    expect(wrapper.find('table').classes()).toContain('b-table')
-    expect(wrapper.find('table').classes().length).toBe(2)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes().length).toBe(2)
 
     wrapper.destroy()
   })
@@ -306,14 +309,17 @@ describe('table', () => {
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('table-responsive-md')
     expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.find('table').classes()).toContain('table')
-    expect(wrapper.find('table').classes()).toContain('b-table')
-    expect(wrapper.find('table').classes().length).toBe(2)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes().length).toBe(2)
 
     wrapper.destroy()
   })
 
-  it('stacked has precedence over responsive', async () => {
+  it('stacked and responsive work together', async () => {
     const wrapper = mount(BTable, {
       propsData: {
         items: items1,
@@ -324,12 +330,16 @@ describe('table', () => {
     })
 
     expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('TABLE')
-    expect(wrapper.classes()).not.toContain('table-responsive')
-    expect(wrapper.classes()).toContain('b-table-stacked')
-    expect(wrapper.classes()).toContain('table')
-    expect(wrapper.classes()).toContain('b-table')
-    expect(wrapper.classes().length).toBe(3)
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('table-responsive')
+    expect(wrapper.classes().length).toBe(1)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes()).toContain('b-table-stacked')
+    expect($table.classes().length).toBe(3)
 
     wrapper.destroy()
   })
@@ -342,6 +352,7 @@ describe('table', () => {
         stacked: true
       }
     })
+
     expect(wrapper).toBeDefined()
     expect(wrapper.findAll('tbody > tr').length).toBe(2)
     const $trs = wrapper.findAll('tbody > tr').wrappers