HTML表格 - 列宽自动调整

时间:2015-08-11 04:59:47

标签: html mysql css

我有一个表格,可以提供如下图所示的输出: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>

4 个答案:

答案 0 :(得分:0)

如果需要宽度可变的变量列号。 您可以动态应用宽度。总页面宽度为100%。 因此,以%值为单位给出列的宽度。 假设您有5列,则宽度计算为100/5 = 20%。

希望它可以帮到你!

答案 1 :(得分:0)

试试这个

&#13;
&#13;
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;
&#13;
&#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>