我有一个表格,可以提供如下图所示的输出:https://drive.google.com/file/d/0B48p5hM0mJhVUVFmSm1Sem9jMHc/view?usp=sharing
每个条目的列数不同,并且没有固定数量的列。列数随每个查询而变化。
如何使所有列的宽度适合空间? 理想情况下,我希望扩展列扩展以均匀填充区域,如标题中所示。或者,我也可以使用空列/空白列,其中列数小于最大值。
这是我的代码:
<table width="auto" border="0" cellpadding="4" cellspacing="1">
<tr>
<th bgcolor="#0080FF"><div align="left"><font color="#000000" face="Arial, Helvetica, sans-serif">Equipment </font></div></th>
<th bgcolor="#0080FF" colspan="100%"><div align="center"><font color="#000000" face="Arial, Helvetica, sans-serif">Problems Reported </font> </div></th>
</tr>
<?php
$t=0;
while ($t < $nume)
{
$e1=mysql_result($resulte,$t,"EQUIP");
?>
<tr>
<td bgcolor="#D7D7FF"><div align="left"><strong><font color="#000000" face="Arial, Helvetica, sans-serif"><?php if(empty($e1)) {echo 'Unlisted Equipment';} else {echo $e1;} ?></font></strong></div></td>
<?php
$queryX = "SELECT NATR, COUNT(NATR) AS COUNT FROM (
(SELECT NATR FROM main WHERE EQUIP = '$e1' AND DATE >='$x2' AND DATE <= '$x5')
UNION ALL (SELECT NATR2 AS NATR FROM main WHERE EQUIP = '$e1' AND DATE >='$x2' AND DATE <= '$x5' AND NATR2 <> '')
UNION ALL (SELECT NATR3 AS NATR FROM main WHERE EQUIP = '$e1' AND DATE>='$x2' AND DATE <= '$x5' AND NATR3 <> '')
) t GROUP BY NATR";
$resultX = mysql_query($queryX);
$rowX = mysql_fetch_array($resultX);
$numX=mysql_numrows($resultX);
$w=0;
while ($w < $numX)
{
$w1=mysql_result($resultX,$w,"NATR");
$w2=mysql_result($resultX,$w,"COUNT");
?>
<td bgcolor="#D7D7FF"><div align="left"><font color="#000000" face="Arial, Helvetica, sans-serif"><?php echo $w1; ?></font></div></td>
<td bgcolor="#D7D7FF"><div align="center"><font color="#000000" face="Arial, Helvetica, sans-serif"><?php echo $w2; ?></font></div></td>
<?php
$w++;
}
?>
</tr>
答案 0 :(得分:0)
如果需要宽度可变的变量列号。 您可以动态应用宽度。总页面宽度为100%。 因此,以%值为单位给出列的宽度。 假设您有5列,则宽度计算为100/5 = 20%。
希望它可以帮到你!
答案 1 :(得分:0)
试试这个
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background-color: #0080FF;
color: #000000;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
td {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
background: #D7D7FF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
&#13;
<table>
<tr>
<th><div align="left">Equipment</div></th>
<th><div align="left">Problems Reported </div></th>
</tr>
<tr>
<td><div align="left">sample</div></td>
<td><div align="left">sample</div></td>
</tr>
</table>
&#13;
答案 2 :(得分:0)
这是一个jquery脚本,它将遍历所有行以确定最大列数,然后将其除以100%并将商%设置为列宽。
使用示例代码,您需要修改/更改获取 $ queryX 的方法,以便插入&lt; td&gt;&amp; nbsp;&lt; / td&gt; 填写浮动td。
var columnCountArray = [],
maxColumnCount = 0,
columnWidthPercent = 100;
$.each($("table tr"), function(e){
columnCountArray.push($(this).find("td").length);
})
maxColumnCount = Math.max.apply(Math, columnCountArray);
columnWidthPercent = 100 / maxColumnCount;
$(".problems").attr("width", columnWidthPercent + "%");
答案 3 :(得分:0)
我能够找到一个简单的解决方法。因为我知道行数;最终最终成为表中的列。我将$ numX乘以2(以查找我的特定查询所需的列数) $ numX = mysql_numrows($ resultX) - &gt; $ NO = $ numX * 2
之后,我只是将colspan中的数字除以100: td colspan =&lt; ? php echo 100 / $ NO; ? &GT; 强>
这对我来说非常好。谢谢你的帮助。
$queryX = "SELECT NATR, COUNT(NATR) AS COUNT FROM (blah blah blah) t GROUP BY NATR";
$resultX = mysql_query($queryX);
$rowX = mysql_fetch_array($resultX);
$numX=mysql_numrows($resultX);
$NO = $numX * 2;
<?php
$w=0;
while ($w < $numX)
{
$w1=mysql_result($resultX,$w,"NATR");
$w2=mysql_result($resultX,$w,"COUNT");
?>
<td colspan="<?php echo 100/$NO; ?>"><div align="left"><?php echo $w1; ?></div></td>
<td colspan="<?php echo 100/$NO; ?>"><div align="center"><?php echo $w2; ?></div></td>