问题

我正在寻求在Bootstrap 5中实现类似这样的表格。

我已经尝试了以下代码，但结果很奇怪，如下图所示。

我不知道我漏掉了什么，已经搜索了很多，但没有找到合适的解决方案。如果这里有人可以帮我解决这个问题，请告诉我。

谢谢！

英文:

I am looking to achieve table something like this in bootstrap 5.

I have tried like this

&lt;table class=&quot;table table-bordered&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;&lt;span&gt;Domain&lt;/span&gt;&lt;/th&gt;
            &lt;th colspan=&quot;3&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
            &lt;th colspan=&quot;3&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
            &lt;th colspan=&quot;3&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
            &lt;th colspan=&quot;3&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
            &lt;th colspan=&quot;3&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
            &lt;th colspan=&quot;3&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
            &lt;th colspan=&quot;3&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;span&gt;Example1&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;            
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;span&gt;Example2&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td &gt;
            &lt;td  rowspan=&quot;3&quot; &gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td &gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

But I am getting weird result like this image

I am not getting idea what I am missing, searched lot but not found any proper solution for the same. Let me know if anyone here can help me for solve the issue.

Thanks!

答案1

得分: 2

你在DOMAIN上缺少rowspan，以及标题部分缺少第二个tr。
此外，后续的td不应该有colspan：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th rowspan="2" class="align-middle"><span>Domain</span></th>
                    <th><span>DR</span></th>
                    <th><span>IR</span></th>
                    <th><span>SR</span></th>
                    <th><span>DR</span></th>
                    <th><span>IR</span></th>
                    <th><span>SR</span></th>
                    <th><span>DR</span></th>
                    <th><span>IR</span></th>
                    <th><span>SR</span></th>
                    <th><span>DR</span></th>
                    <th><span>IR</span></th>
                    <th><span>SR</span></th>
                    <th><span>DR</span></th>
                    <th><span>IR</span></th>
                    <th><span>SR</span></th>
                    <th><span>DR</span></th>
                    <th><span>IR</span></th>
                    <th><span>SR</span></th>
                    <th><span>DR</span></th>
                    <th><span>IR</span></th>
                    <th><span>SR</span></th>
                </tr>
            </thead>
            <tbody> 
                <tr>
                    <td><span>Example1</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                </tr>
                <tr>
                    <td><span>Example2</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                    <td><span>DR</span></td>
                    <td><span>IR</span></td>
                    <td><span>SR</span></td>
                </tr>
            </tbody>
        </table>

<!-- end snippet -->

英文:

You are missing the rowspan on the DOMAIN, and a second tr in the header.
Also you shouldn't have colspans for the subsequent tds:

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;table class=&quot;table table-bordered&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th rowspan=&quot;2&quot; class=&quot;align-middle&quot;&gt;&lt;span&gt;Domain&lt;/span&gt;&lt;/th&gt;
&lt;th colspan=&quot;3&quot; class=&quot;text-center&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
&lt;th colspan=&quot;3&quot; class=&quot;text-center&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
&lt;th colspan=&quot;3&quot; class=&quot;text-center&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
&lt;th colspan=&quot;3&quot; class=&quot;text-center&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
&lt;th colspan=&quot;3&quot; class=&quot;text-center&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
&lt;th colspan=&quot;3&quot; class=&quot;text-center&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
&lt;th colspan=&quot;3&quot; class=&quot;text-center&quot;&gt;&lt;span&gt;DATE&lt;/span&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/th&gt;
&lt;th&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt; 
&lt;tr&gt;
&lt;td&gt;&lt;span&gt;Example1&lt;/span&gt;&lt;/td &gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;span&gt;Example2&lt;/span&gt;&lt;/td &gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;DR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;IR&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;&lt;span&gt;SR&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

多列和多行在Bootstrap表格中

问题

答案1

自定义按钮使用styled-components TypeScript

ASP.Net Core Web App – 如何防止在导航到其他页面时重新加载导航栏样式？

从下拉框中选择值（未显示）并发送到电子邮件。

按钮样式不起作用，不确定该怎么办。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论