我编写了一个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;
}
以下是我当前输出的屏幕截图。
我如何制作具有相似宽度的列,不包括第一列,因为我指定的宽度是多少?