Как я могу сделать ширину столбца таблицы несколько схожим автоматически?

Question

Я написал PHP-код для генерации таблицы динамически. Главой таблицы может быть любое текстовое значение в базе данных, а столбец таблицы может быть любым текстом в базе данных. Если значение столбцов одинаковое или похожее, ширина должна быть одинаковой.

следующий мой HTML-код, который генерируется PHP

<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/