php - 如何自动使表格列宽有点相似？

Question

我写了一个 PHP 代码来动态生成一个表。表头可以是数据库中的任何文本值，表的列可以是数据库中的任何文本。如果列的值相同或相似，则宽度应该有些相同。

以下是我由 PHP 生成的 HTML 代码

<div style="margin: 0 auto; text-align: center;">
    <table class="common2">
        <thead>
        <tr>
            <th colspan="12">Title</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style="text-align: left; width: 150px;">Answer Options</td>
            <td style="text-align: center;">1</td>
            <td style="text-align: center;">2</td>
            <td style="text-align: center;">3</td>
            <td style="text-align: center;">4</td>
            <td style="text-align: center;">5</td>
            <td style="text-align: center;">6</td>
            <td style="text-align: center;">7</td>
            <td style="text-align: center;">8</td>
            <td style="text-align: center;">9</td>
            <td style="text-align: center;">10</td>
            <td style="text-align: center;">11+</td>
        </tr>
        <tr>
            <td style="text-align: left; width: 150px;">Response Count</td>
            <td style="text-align: center;">2</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">1</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">1</td>
        </tr>
        </tbody>
    </table>
</div>

这是我的 common2 css 代码

.common2 
    {
        width: 100%;
        border: solid #E6E6E6 1px;
        margin: 0 auto;
        padding: 0;
        border-spacing: 0px;
        /* border-collapse: collapse; */
    }

    .common2 td 
    {
        padding: 6px;
        border: solid #E6E6E6 1px;
    }

    .common2 th 
    {
        color: #fff;
        font-weight: bold;
        text-align: center;
        border: solid #E6E6E6 1px;
        background-color: #1A1A1C;
        padding: 8px;
        font-size: 14.5px;
    }

    .common2 th.highlighed
    {
        color: #fff;
        font-weight: bold;
        text-align: center;
        border: 0px solid #DBDBDB;
        background-color: #666666;
        padding: 6px 10px;
    }   



.common2 tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;

}



.common tr:last-child td:last-child {
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

    .common2 tr:nth-child(even) 
    {
        background-color: #E8E8E8; /*#E7E9E8; /*#D6D8D7;*/
        position: relative;
    }



    .common2 td.stickOut
    {
        background-color: #DDEAFA; /*#DBAFAF;*/
        position: relative;
        font-weight: bold;
        border: solid #DBDBDB 1px;

    }



    .common2 td.head
    {
       background-color: #25328C; /* #4F4F4F; */
        text-align: center;
        border: 1px solid #25328C;
        padding: 3px;
        font-weight: bold;
        color: #fff;
        padding: 4px 10px;
        height: 35px;

        /* IE10 Consumer Preview */ 
        background-image: -ms-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);

        /* Mozilla Firefox */ 
        background-image: -moz-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);

        /* Opera */ 
        background-image: -o-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);

        /* Webkit (Safari/Chrome 10) */ 
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2C3C92), color-stop(1, #25328C));

        /* Webkit (Chrome 11+) */ 
        background-image: -webkit-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);

        /* W3C Markup, IE10 Release Preview */ 
        background-image: linear-gradient(to top, #2C3C92 0%, #25328C 100%);

    }


    .common2 td.subfoot
    {
       background-color: #FFFF99; /* #4F4F4F; */
        text-align: center;
        border: 1px solid #DBDBDB;
        padding: 3px;
        color: #000;
        font-weight: 600;
        font-style:italic;
        padding: 4px 10px;
    }



    .common2 td.foot1
    {
       background-color: #999999; /* #4F4F4F; */
        text-align: center;
        border: 1px solid #DBDBDB;
        padding: 3px;
        font-weight: bold;
        color: #fff;
        padding: 4px 10px;
    }

    .common2 td.foot2
    {
       background-color: #555555; /* #4F4F4F; */
        text-align: center;
        border: 1px solid #DBDBDB;
        padding: 3px;
        font-weight: bold;
        color: #fff;
        padding: 4px 10px;
    }

这是我当前输出的屏幕截图。

我怎样才能使这些列具有相似的宽度，不包括第一列，因为我指定了它的宽度？

Answer 1

删除宽度属性.common2

http://jsfiddle.net/raam86/knj9E/