在列中创建列

Question

这是输出应该是什么样子的图片：

我想创建这样的东西（参见附图）。但我不能做同样的事情。我已经尝试过使用div和table标签。

这就是我一直在做的事情

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="col-xs-1">ProjectID</th>
            <th>Program/Project</th>
            <th class="col-xs-1">Office/Unit</th>
            <th class="col-xs-1">General Description</th>
            <th class="col-xs-1">Methods</th>
            <th> Schedule/Milestone
                <table> 
                    <tr>
                        <td class="col-xs-1">Jan</td>
                        <td class="col-xs-1">Feb</td>
                        <td class="col-xs-1">Mar</td>
                        <td class="col-xs-1">Apr</td>
                        <td class="col-xs-1">May</td>
                        <td class="col-xs-1">Jun</td>
                        <td class="col-xs-1">Jul</td>
                        <td class="col-xs-1">Aug</td>
                        <td class="col-xs-1">Sep</td>
                        <td class="col-xs-1">Oct</td>
                        <td class="col-xs-1">Nov</td>
                        <td class="col-xs-1">Dec</td>
                    </tr>
                </table>
            </th>
            <th class="col-xs-1">Source of funds</th>
            <th class="col-xs-1">Approved Budget Ceiling (ABC)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Empty</td>
            <td>Empty</td>
            <td>Empty</td>
            <td>Empty</td>
            <td>Empty</td>
            <td>
                <!-- THIS IS WHERE I CAN'T GET IT RIGHT -->
                <table>
                    <tr>
                    <td class="col-xs-1">1</td>
                    <td class="col-xs-1">2</td>
                    <td class="col-xs-1"> 3</td>
                    <td class="col-xs-1"> 4</td>
                    <td class="col-xs-1"> 5</td>
                    <td class="col-xs-1"> 6</td>
                    <td class="col-xs-1"> 7</td>
                    <td class="col-xs-1"> 8</td>
                    <td class="col-xs-1"> 9</td>
                    <td class="col-xs-1"> 10</td>
                    <td class="col-xs-1"> 11</td>
                    <td class="col-xs-1"> 12</td>
                    </tr>
                </table>    
            </td>
            <td>Empty</td>
            <td>Empty</td>
        </tr> 
    </tbody>
</table>

但是这段代码的输出如下：

我正在使用bootstrap来创建我的网站。

Answer 1

你要做的事情实际上是不可能的，因为你将桌面结构分成两部分。这意味着第二个表（1,2,3 ..）中的每个单元格将具有其内容的宽度，并且不会受到标题单元格宽度的影响（Jan，Feb，Mar ... ）。

这就是你看到这个的原因。

解决此问题的一种方法是在两个表上应用table-layout: fixed，然后为每个td提供固定宽度和display: inline-block属性。

.milestone-table {
  table-layout: fixed;
  width: 390px; /*optional*/
}

.milestone-table td {
  width: 30px;
  display: inline-block;
}

Demo