chore(docs): mention in table docs that fixed and responsive do not work well with each other (closes bootstrap-vue#4598) (bootstrap-vue#4677)

lerity-yao · tmorehouse · tmorehouse · commit 35a2f2327202 · 2020-01-26T20:42:52.000-04:00
Co-authored-by: Troy Morehouse &lt;troymore@nbnet.nb.ca&gt;
diff --git a/src/components/table/README.md b/src/components/table/README.md
@@ -575,6 +575,21 @@ values: `sm`, `md`, `lg`, or `xl`.
 - _Possible vertical clipping/truncation_. Responsive tables make use of `overflow-y: hidden`, which
   clips off any content that goes beyond the bottom or top edges of the table. In particular, this
   may clip off dropdown menus and other third-party widgets.
+- Using props `responsive` and `fixed` together will **not** work as expected. Fixed table layout
+  uses the first row (table header in this case) to compute the width required by each column (and
+  the overall table width) to fit within the width of the parent container &mdash; without taking
+  cells in the `<tbody>` into consideration &mdash; resulting in table that may not be resposive. To
+  get around this limitation, you would need to specify widths for the columns (or certain columns)
+  via one of the following methods:
+  - Use `<col>` elements within the [`table-colgroup` slot](#table-colgroup) that have widths set
+    (e.g. `<col style="width: 20rem">`), or
+  - Wrap header cells in `<div>` elements, via the use of
+    [custom header rendering](#header-and-footer-custom-rendering-via-scoped-slots), which have a
+    minimum width set on them, or
+  - Use the `thStyle` property of the [field definition object](#field-definition-reference) to
+    set a width for the column(s), or
+  - Use custom CSS to define classes to apply to the columns to set widths, via the `thClass` or
+    `class` properties of the [field definition object](#field-definition-reference).
 
 ### Stacked tables
 
