bootstrap表：如何设置最大高度并使嵌套内容水平对齐

Question

我正在开发一个包含嵌套内容的引导表，如下所示

<table class="table table-bordered">
    <thead>
        <tr>
            <td>Name</td>
            <td>value</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>hello</td>
            <td>
               <tr><td>0</td></tr>
               <tr><td>1</td></tr>
               <tr><td>2</td></tr>
               <tr><td>3</td></tr>
               <tr><td>4</td></tr>
               <tr><td>5</td></tr>
               <tr><td>6</td></tr>
               <tr><td>7</td></tr>
               <tr><td>8</td></tr>
               <tr><td>9</td></tr>
               <tr><td>10</td></tr>
            </td>
        </tr>
    </tbody>
</table>

这些嵌套内容垂直显示。我需要一种方法来检测<td>的高度。比方说50px，一旦超出限制，<tr>内的<td>将水平对齐。
要注意表是通过递归函数生成的，它的想法是构造一个树表。但节省空间是我的首要任务。

Answer 1

您应该使用其他标记，例如div而不是tr。 tr总是决定换行。 如果您使用的是bootstrap，则可以将class="row"用于外部td，将class="col-sm-2/3//...n"用于内部div或其他元素。这样它就可以水平对齐。