fix(datatable):toolbar bar not displayed with title (carbon-design-sy…

…stem#11491)

### Related Ticket(s)

Closes carbon-design-system#11473

### Description

For data table, `cds-table-toolbar` and `cds-table-header-title` doesn't work together in firefox browser.  Toolbar doesn't show.

### Changelog

**Changed**

- Updated the toolbar slot position.
- Updated the style for toolbar and the container.


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

web-components/packages/carbon-web-components/src/components/data-table/_table-action.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -22,8 +22,6 @@
   @extend .#{$prefix}--table-toolbar;
 
   z-index: 1;
-
-  display: table-caption;
 }
 
 :host(#{$prefix}-table-toolbar-content) {

web-components/packages/carbon-web-components/src/components/data-table/_table-core.scss

@@ -51,11 +51,13 @@
 }
 
 :host(#{$prefix}-table[with-header]) {
-  .#{$prefix}--data-table-header {
+  .#{$prefix}--data-table-header-container {
     display: table-caption;
   }
 }
-
+.#{$prefix}--data-table-header-container {
+  display: table-caption;
+}
 :host(#{$prefix}-table-head[sticky-header]) {
   position: sticky;
   z-index: 1;

web-components/packages/carbon-web-components/src/components/data-table/table.ts

@@ -780,11 +780,15 @@ class CDSTable extends HostListenerMixin(LitElement) {
   /* eslint-disable no-constant-condition */
   render() {
     return html`
-      <div ?hidden="${!this.withHeader}" class="${prefix}--data-table-header">
-        <slot @slotchange="${this._handleSlotChange}" name="title"></slot>
-        <slot @slotchange="${this._handleSlotChange}" name="description"></slot>
+      <div class="${prefix}--data-table-header-container">
+        <div ?hidden="${!this.withHeader}" class="${prefix}--data-table-header">
+          <slot @slotchange="${this._handleSlotChange}" name="title"></slot>
+          <slot
+            @slotchange="${this._handleSlotChange}"
+            name="description"></slot>
+        </div>
+        <slot name="toolbar"></slot>
       </div>
-      <slot name="toolbar"></slot>
 
       ${false // TODO: replace with this.stickyHeader when feature is fully implemented
         ? html` <div class="${prefix}--data-table_inner-container">