Search code examples
csswidthcss-tables

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 decreases 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.


Solution

  • 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 {
    }