Question

我正在尝试创建一个HTML表格，其中<th>的宽度与<td>不同，但仍然是对齐的。我想知道是否可以使用CSS / JavaScript。此外，我正在使用DataTables jQuery插件来创建我的HTML，因为我需要修复标题/第一列。

以下是该表目前的显示方式：（请参阅相册中的第一张图片）

我想把td's挤在一起，但桌头太宽了。如果我只是将td's凑在一起而不做任何事情，那么桌子会失去对齐。（我知道边界看起来很可怕，只是有助于显示错位）

我通过改变DataTables / FixedColumns插件计算的宽度来改变宽度。试图改变标题的宽度并没有给我带来我想要的效果。

（请参阅相册中的第二张图片）

最后，这是我正在寻找的一个例子。看看表头如何相互重叠？

（请参阅相册中的最终图片）

我想知道这是否可以使用CSS / JavaScript？很抱歉没有发布单个图片的链接，我是网站的新用户，我没有足够的声誉来发布两个以上的链接。非常感谢大家！

图像相册：http://imgur.com/a/9uXs5

Answer 1

快速搜索，我发现了这个：http://s-church.net/Blog/Entry/464

看起来正是您想要的：

enter image description here

Answer 2

HTML代码 -

<table>
    <thead>
        <tr>
            <th colspan=3>Values (Type A)</th>
        </tr>
        <tr>
            <th colspan=3>Values (Type B)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>4</td><td>5</td><td>6</td>
        </tr>
    </tbody>
</table>

CSS代码 -

th {
    background-color: #4072B4;
}
td {
    background-color: #608DC9
}

HTML表格标题的宽度不同于单元格

2 个答案: