Question

有没有办法不对齐表格单元格？我希望我的标题位于表格之间，如

-------------
| | A | B | |
-------------
|   |   |   |
-------------
|   |   |   |
-------------

无论如何不使用两个表或使用div而不是表来执行此操作？

我在小提琴上尝试了一些东西，但它不起作用，第一张桌子是我想要的样子，但没有使用两张桌子 http://jsfiddle.net/nA3DL/

提前致谢

Answer 1

您可以使用未排序的列表，但我不确定您将在表格中显示多少数据..可能需要做很多工作，但如果它只是您的表格-header会有不同的外观，这可能就是这样做的方法：

CSS：

.table {
    width: 500px;
}

.table ul {
    list-style: none;
    display: table; 
    width: 100%;
    text-align: center;
    margin: 0;
}

.table ul li {
    display: table-cell;
    border: 1px solid black;
}

.table ul li.small {
    width: 50px;
}

.table ul li.big {
     width: 20%;
}

HTML：

<div class="table">
    <ul>
        <li class="small"></li>
        <li>Header</li>
        <li>Header</li>
        <li>Header</li>
        <li>Header</li>
        <li class="small"></li>
    </ul>
    <ul>
        <li class="big">Data</li>
        <li class="big">Data</li>
        <li class="big">Data</li>
        <li class="big">Data</li>
        <li class="big">Data</li>
    </ul>
</div>

这是一个小提琴：http://jsfiddle.net/3dpnX/2/

Answer 2

您可以在标题上设置相对位置，并将它们移到左侧：

table.test th{
    width:100px;
    position: relative;
    left: -50px;
}
table.test th.half{
    visibility: hidden;
}

fiddle

css以不同方式对齐表行而不使用另一个表

2 个答案: