Question

我有下表和css，无法正确排列标题。我的想法是为TD和TH标签创建一个类，并在那里设置一个固定的宽度。这对我来说不起作用。请在此处查看代码：

我的css如下：

table#targetedAttacks
{
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    table-layout: fixed;
    width: 500px
}
tbody.scrollTbl {
    height: 250px;
    overflow: auto;
    border: 2px solid #000;
    background-color:#ccc;
    width: 525px;
}

table#targetedAttacks td {
    background-color:#fafafa;
    cursor: default;
    border-bottom: 1px solid #ccc;
    padding: 3px 10px;
}
tbody.scrollTbl td div {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:100px;
}

thead > tr, tbody{
    display:block;
}
.date {
    width: 20%;
}
.subject {
    width: 20%;
}
.malwareName {
    width: 20%;
}
.malwareCat {
    width: 20%;
}
.reason {
    width: 10%;
}
.recipients {
    width: 10%;
}

table#targetedAttacks thead th
{
    text-align: center;
    background-color: #ddd;
    cursor: pointer;
    padding: 5px;
}

Answer 1

摆脱以下几点：

thead > tr, tbody{
    display:block;
}

它会像你想要的那样工作

Answer 2

我通过将td / th标签中包含的div的宽度设置为与td / th标签上的宽度直接相反来实现它。请看这里的小提琴：

http://jsfiddle.net/rc7g79Lt/3/

和css在这里：

table#targetedAttacks
{
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    table-layout: fixed;
    width:505px
}
tbody.scrollTbl {
    height: 250px;
    overflow: auto;
    border: 2px solid #000;
    background-color:#ccc;
}

table#targetedAttacks td {
    background-color:#fafafa;
    cursor: default;
    border-bottom: 1px solid #ccc;
}
tbody.scrollTbl td div {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

thead > tr, tbody{
    display:block;
}

table#targetedAttacks thead th
{
    text-align: center;
    background-color: #ddd;
    cursor: pointer;
}
table#targetedAttacks div{
    width:75px;
}

滚动tbody和标题没有排队

2 个答案: