Question

我有一个简单的表，有一个大列。我想将这些列显示为多列。目前我喜欢如下：

Column
a
a
a
a
a
a

我需要类似的东西：

      Column
a     a       a
a     a       a

我的代码如下：

<table>        
    <thead>Details</thead>
        <tbody>
        <tr>
            <td>a</td>
        </tr>

        <tr>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
        </tr>
<tr>
            <td>a</td>
        </tr>

        <tr>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
        </tr>
</tbody>
</table>

如何在不改变表格结构的情况下做到这一点？

Jsfiddle：http://jsfiddle.net/wLjmpvuz/

Answer 1

要在不更改所请求的表结构的情况下执行此操作，您需要使用CSS来阻止正常的表显示，而是实现“模拟表”。这可以通过将tr元素转换为向左浮动的内联块，但在每三个tr元素之后浮动清除来完成。这不适用于旧版本的IE。例如：

table {
  display: block;
}
tr {
   display: inline-block;
   float: left;
   border: solid 1px;
   width: 4em;
}
td {
   display: inline;
}
tr:nth-child(3n+1) {
   clear: left;
}

见jsfiddle。请注意，此类模拟表具有许多限制。你不能让浏览器分配列宽（因为没有真正的列）;相反，您需要设置元素宽度以创建列的印象。您不能像在表格中那样使相邻边框折叠，因此设置边框更有效。

您可以使用构造新table元素的JavaScript代码保留HTML标记，而不是表结构，连续三个单元格，从原始表格中取出单元格内容，然后替换原始表与新创建的表。

Answer 2

你的问题不如水清楚，但如果我理解你，你想要一个嵌套的表

这样的事情：

<table>        
    <thead>
        <th>Details</th>
        <th>Column2
        </th>
    </thead>
        <tbody>
        <tr>
            <td>
                <table>
                    <tbody>
                        <tr>
                            <td>a</td>
                            <td>a</td>
                            <td>a</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>a</td>
                            <td>a</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                Other Column Data
            </td>
        </tr>
    </tbody>
</table>

Fiddler：http://jsfiddle.net/wLjmpvuz/6/

如果您只需要一个平面表，则应该没有嵌套表：

<table>        
    <thead>Details</thead>
        <tbody>
        <tr>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
    </tbody></table>

Fiddler：http://jsfiddle.net/wLjmpvuz/1/

Answer 3

为什么不更改表结构？每个都是新的一行。试试这个

<table>        
    <thead>Details</thead>
        <tbody>
        <tr>
            <td>a</td>

            <td>a</td>

            <td>a</td>
        </tr>
        <tr>
            <td>a</td>

            <td>a</td>

            <td>a</td>
        </tr>
        <tr>
            <td>a</td>

            <td>a</td>

            <td>a</td>
        </tr>

    </tbody></table>

Answer 4

我不确定这是否能解决您的问题。 http://jsfiddle.net/wLjmpvuz/8/

<table>        
<thead>Details</thead>
    <tbody>
    <tr>
        <td>a</td>
        <td>a</td>
         <td>a</td>
    </tr>
    <tr>
        <td>a</td>
        <td>a</td>
         <td>a</td>
    </tr>
    <tr>
        <td>a</td>
        <td>a</td>
         <td>a</td>
    </tr>
</tbody></table>

如何将html表单列显示为多列？

4 个答案: