开发者

Inconsistent table cell width in different tables

I have three different tables that have the exact same style rules applied to them, and yet bizarrely, the width of the second column de开发者_JS百科creases with each subsequent table.

Here are the rules:

#content table {
    font-size: 0.875em;
    border-collapse: collapse;
}

#content th {
    font-size: 1.125em;
    margin-top: 0.5em;
}

#content tr {
    border-bottom: 1px dotted #959da5;
}

#content tr:nth-child(even) {
    background: #dfe5e9;
}

#content tr:last-child {
    border: none;
}

#content td {
    vertical-align: top;
    padding: 1em 0.5em;
}

#content td:first-child {
    width: 33%;
}

#content td:last-child {
    width: 66%;
}

And here is the link to the page in question: http://cisdl.org/gonthier/about-judge-gonthier/judgments.html

Happens in Webkit and Firefox. What could be causing this?

P.S. I only added a fixed width after I discovered the bug, but it didn't help.


For some reason (I'm guessing margin or padding) your two width statements contradict each other. Just remove one of them you are fine.


Like this:

#content td:first-child {
    width: 33%;
}

#content td:last-child {
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜