如何在嵌套表中使用 colspan答案

【问题标题】：how to use colspan in nested table如何在嵌套表中使用 colspan
【发布时间】：2021-12-20 07:21:09
【问题描述】：

这里是初学者，我有一个项目需要我创建一个 html 表并按列而不是按行向其中插入数据，有人告诉我这可以通过嵌套表来实现，并且外部表将只有一行它中的每个单元格都是自己的表格，我的问题是我需要内部单元格根据其持续时间的变量进行跨度，它不适用于内部表格

我的最终目标是：

enter image description here 我尝试创建嵌套表并使用 colspan 如下：

  <style>
    th{
        text-align: center;
    }
    table{
        border-collapse:collapse;
    }
</style>
<body>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>
                    thursday
                </th>
                <th>
                    wednesday
                </th>
                <th>
                    tuesday
                </th>
                <th>
                    monday
                </th>
                <th>
                    sunday
                </th>
            </tr>
            
        </thead>
        <tbody>
            <tr>
                <td >
                    <table class="table table-bordered">
                        <tr>
                            <td colspan="3">f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                    </table class="table table-bordered">
                </td>
                <td>
                    <table class="table table-bordered">
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                    </table > 
                </td>
                <td>
                    <table class="table table-bordered">
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table class="table table-bordered">
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table class="table table-bordered">
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                        <tr>
                            <td>f</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

    
</body>

我这可能与嵌套表？还是我需要采取任何其他方法，例如反转表格？

【问题讨论】：

标签： html css html-table

【解决方案1】：

This is like Your output image, in this way you don't need nested table

<body>
 <table class="table table-bordered">
    <thead>
        <tr>
            <th>
                thursday
            </th>
            <th>
                wednesday
            </th>
            <th>
                tuesday
            </th>
            <th>
                monday
            </th>
            <th>
                sunday
            </th>
        </tr>
        
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td style="background:blue">first activity</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
            <td style="background:green" colspan="3">
               second activity
            </td>
            <td>
            
            </td>
            <td>
            
            </td>
        </tr>
    </tbody>
</table>
</body>

【讨论】：

感谢您的重播！我很抱歉，我的问题还不够清楚，按照您所展示的方式，我无法将数据插入到表中，或者至少是我知道的方式，因为没有嵌套表，行确实不显示特定日期