table styles not applied by bootstrap sub-theme

Question

I'm writing a custom sub-theme of bootstrap with Drupal 9, and have noticed that table elements in my forums do not render properly:

This is despite me selecting "Bordered Table" in the configuration settings:

The next thing I tried was using Chrome's "inspect" feature to manually add class = "table" to the table element, which caused it render much more nicely;

I don't see any options to apply that class to table elements, either in the forum settings nor in the bootstrap settings.

I have a few questions to help me (and hopefully others) understand what's happening here;

1. Is adding the class = "table" to table elements the right approach?
2. Assuming it is, what's the right way to apply this class to table elements? (I've not averse to writing php code, I've just never written a theme before so I don't know where to start)
3. What's the point of those bootstrap table settings - they don't seem to do anything?

EDIT:

As per leymannx's suggestion, I've enabled twig debugging and looked at the resulting html:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'forums' -->
<!-- FILE NAME SUGGESTIONS:
   * forums--containers--0.html.twig
   * forums--0.html.twig
   * forums--containers.html.twig
   x forums.html.twig
-->
<!-- BEGIN OUTPUT from 'core/modules/forum/templates/forums.html.twig' -->
  

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'forum_list' -->
<!-- BEGIN OUTPUT from 'core/modules/forum/templates/forum-list.html.twig' -->
<table>
  <thead>
    <tr>
      <th>Forum</th>
      <th>Topics</th>
      <th>Posts</th>
      <th>Last post</th>
    </tr>
  </thead>
  <tbody>
      <tr>
      <td>
                          <div title="No new posts">
            <span class="visually-hidden">No new posts</span>
          </div>
          <div><a href="/forum/1">General discussion</a></div>
                      <div></div>
                        </td>
              <td>
          0
                  </td>
        <td>0</td>
        <td>

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'forum_submitted' -->
<!-- BEGIN OUTPUT from 'core/modules/forum/templates/forum-submitted.html.twig' -->
  n/a

<!-- END OUTPUT from 'core/modules/forum/templates/forum-submitted.html.twig' -->

</td>
          </tr>
    </tbody>
</table>

<!-- END OUTPUT from 'core/modules/forum/templates/forum-list.html.twig' -->

Answer 1

I opened issue #3190017 Apply table settings to core's forum list table where I added the preprocess plugin and the forum list template with the adjustments to respect the theme settings. You now can change the table settings and revisit /forum to see how the changes are applied. You can simply use the patch via Composer if you want.

Answer 2

leymannx suggested twig debugging, which was super helpful. The solution I came up with was to copy the core/modules/forum/templates/forum-list.html.twig file into mytheme/templates and then modify it to take the table theming elements from the system/table.html.twig file in bootstrap.

Here's the end result:

{#
/**
 * @file
 * Default theme implementation to display a list of forums and containers.
 *
 * Available variables:
 * - forums: A collection of forums and containers to display. It is keyed to
 *   the numeric IDs of all child forums and containers. Each forum in forums
 *   contains:
 *   - is_container: A flag indicating if the forum can contain other
 *     forums. Otherwise, the forum can only contain topics.
 *   - depth: How deep the forum is in the current hierarchy.
 *   - zebra: 'even' or 'odd', used for row class.
 *   - icon_class: 'default' or 'new', used for forum icon class.
 *   - icon_title: Text alternative for the forum icon.
 *   - name: The name of the forum.
 *   - link: The URL to link to this forum.
 *   - description: The description field for the forum, containing:
 *     - value: The descriptive text for the forum.
 *   - new_topics: A flag indicating if the forum contains unread posts.
 *   - new_url: A URL to the forum's unread posts.
 *   - new_text: Text for the above URL, which tells how many new posts.
 *   - old_topics: A count of posts that have already been read.
 *   - num_posts: The total number of posts in the forum.
 *   - last_reply: Text representing the last time a forum was posted or
 *     commented in.
 * - forum_id: Forum ID for the current forum. Parent to all items within the
 *   forums array.
 *
 * @see template_preprocess_forum_list()
 *
 * @ingroup themeable
 */
#}
{% if responsive %}
  <div class="table-responsive">
{% endif %}
{%
  set classes = [
    'table',
    bordered ? 'table-bordered',
    condensed ? 'table-condensed',
    hover ? 'table-hover',
    striped ? 'table-striped',
    sticky ? 'sticky-enabled',
  ]
%}
<table{{ attributes.addClass(classes) }}>
  <thead>
    <tr>
      <th>{{ 'Forum'|t }}</th>
      <th>{{ 'Topics'|t }}</th>
      <th>{{ 'Posts'|t }}</th>
      <th>{{ 'Last post'|t }}</th>
    </tr>
  </thead>
  <tbody>
  {% for child_id, forum in forums %}
    <tr>
      <td{% if forum.is_container == true %} colspan="4"{% endif %}>
        {#
          Enclose the contents of this cell with X divs, where X is the
          depth this forum resides at. This will allow us to use CSS
          left-margin for indenting.
        #}
        {% if forum.depth > 0 %}{% for i in 1..forum.depth %}<div class="indent">{% endfor %}{% endif %}
          <div title="{{ forum.icon_title }}">
            <span class="visually-hidden">{{ forum.icon_title }}</span>
          </div>
          <div><a href="{{ forum.link }}">{{ forum.label }}</a></div>
          {% if forum.description.value %}
            <div>{{ forum.description.value }}</div>
          {% endif %}
        {% if forum.depth > 0 %}{% for i in 1..forum.depth %}</div>{% endfor %}{% endif %}
      </td>
      {% if forum.is_container == false %}
        <td>
          {{ forum.num_topics }}
          {% if forum.new_topics == true %}
            <br />
            <a href="{{ forum.new_url }}">{{ forum.new_text }}</a>
          {% endif %}
        </td>
        <td>{{ forum.num_posts }}</td>
        <td>{{ forum.last_reply }}</td>
      {% endif %}
    </tr>
  {% endfor %}
  </tbody>
</table>
{% if responsive %}
  </div>
{% endif %}

The table now seems to render sensibly;