Question

我不是html / UI用户，而是我需要使用Bootstrap的原因。它简化了UI部分所需的大部分内容。

然而，当谈到桌子时，我输了。

我附上了照片。你能提供html部分吗？

http://i.imgur.com/PtajoC3.png?1

我现在的HTML：

 <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">.col-sm-6
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-2
      <div class="row">
        <div style="background-color:lightcyan;">.col-sm-6</div>
      </div>
      <div class="row">
        <div style="background-color:lightgray;">.col-sm-6</div>
      </div>
    </div>
  </div>

Answer 1

您可以使用html表的 rowspan 属性。

以下是一个例子：

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_rowspan

Answer 2

HTML code：

    <div class="container" >

        <div class="row">
            <div class="col-md-7 col-xs-10 pull-left table100">
                <p>Hello</p>
                <div class="table-responsive">
                    <table class="table table-bordered ">
                        <tbody>
                            <tr>
                                <td>cols1</td>
                                <td>cols2</td>
                                <td>cols3</td>
                                <td>cols4</td>

                            </tr>
                            <tr>
                                <td rowspan="3">1</td>
                                <td>a</td>
                                <td></td>
                                <td></td>

                            </tr>
                            <tr>

                                <td>b</td>
                                <td></td>
                                <td></td>

                            </tr>
                            <tr>

                                <td>c</td>
                                <td></td>
                                <td></td>

                            </tr>
                            <tr>
                                <td rowspan="3">2</td>
                                <td></td>
                                <td></td>
                                <td></td>

                            </tr>
                            <tr>

                                <td></td>
                                <td></td>
                                <td></td>

                            </tr>
                            <tr>

                                <td></td>
                                <td></td>
                                <td></td>

                            </tr>
                         </tbody>
                    </table>
                </div>


            </div>
        </div>
    </div>

CSS代码：

td{height:50px}

这是JS FIDDLE DEMO

我希望你得到适当的解决方案。

Bootstrap表嵌套3行，另一列与其他3个嵌套行一样大

2 个答案: