Question

我在将CSS样式应用于动态表时遇到问题。我正在连接到数据库，我知道数据已正确填充并显示。我的问题是有900条记录，我想利用滚动条限制表格大小。我已经读过elseware，要完成此任务的正确CSS样式节点是：How to specify table's height such that a vertical scroll bar appears?

溢出：自动;

身高：700px;

display：block;

overflow-y：滚动;

起初我尝试使用内联样式（一个禁忌......我意识到），但它没有用。我已经阅读过关于在表格和/或单个行中添加“类”的内容，然后会反映在我的CSS样式表中，但我似乎无法弄清楚如何实现这一点。当我向PHP添加'span'或'class'标签指示符时，我会遇到语法错误（我想通过使用'ECHO' - 两者都需要双引号）。

我正在努力完成的一个很好的例子：http://www.timrivera.com/tests/csstables.html#markupIE

下面的PHP代码片段具有良好的语法，但我不知道在哪里适当地添加类或跨度指示符。有一点需要注意 - 我需要为不同的表设置不同的样式，因此更改全局“表”CSS是行不通的。

//Function that gets the SQL recordset. 
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
   echo "<table border='1' >
  <tr>
  <th>Facility</th>
  <th>Process Flow</th>
  <th>Operation</th>
  <th>Device</th>
  <th>Item</th>
  <th>Value</th>
  <th>Database Source</th>

  </tr>";

  while($row2 = oci_fetch_array($result2)){
  echo "<tr>";
  echo "<td>" . $row2['FACILITY_AT'] . "</td>";
  echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
  echo "<td>" . $row2['OPN_NAME'] . "</td>";
  echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
  echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
  echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
  echo "<td>" . $row2['SOURCE'] . "</td>";
  echo "</tr>";
  }
  echo "</table>";

Answer 1

我认为最好的方法是在桌子周围包裹div并给div一个高度。

http://phpfiddle.org/main/code/i7h-9b1

<style type="text/css">
    #scroll {
        height: 100px; /* Max height of table */
        overflow-y: scroll;
        width: 340px;
    }
</style>

<div id="scroll">
    table
</div>

使用您的代码：

echo '
<style type="text/css">
     #scroll {
         height: 100px; /* Max height of table */
         overflow-y: scroll;
         width: 340px;
    }
</style>';

//Function that gets the SQL recordset. 
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
   echo "<div id='scroll'><table border='1' >
  <tr>
  <th>Facility</th>
  <th>Process Flow</th>
  <th>Operation</th>
  <th>Device</th>
  <th>Item</th>
  <th>Value</th>
  <th>Database Source</th>

  </tr>";

  while($row2 = oci_fetch_array($result2)){
  echo "<tr>";
  echo "<td>" . $row2['FACILITY_AT'] . "</td>";
  echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
  echo "<td>" . $row2['OPN_NAME'] . "</td>";
  echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
  echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
  echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
  echo "<td>" . $row2['SOURCE'] . "</td>";
  echo "</tr>";
  }
  echo "</table></div>";

Answer 2

将您的PHP代码编辑为...

//Function that gets the SQL recordset. 
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
  echo "<div class=\"table-container\">";
  echo "<table border='1' >
  <tr>
  <th>Facility</th>
  <th>Process Flow</th>
  <th>Operation</th>
  <th>Device</th>
  <th>Item</th>
  <th>Value</th>
  <th>Database Source</th>

  </tr>";

  while($row2 = oci_fetch_array($result2)){
  echo "<tr>";
  echo "<td>" . $row2['FACILITY_AT'] . "</td>";
  echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
  echo "<td>" . $row2['OPN_NAME'] . "</td>";
  echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
  echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
  echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
  echo "<td>" . $row2['SOURCE'] . "</td>";
  echo "</tr>";
  }
  echo "</table>";
  echo "</div>";

然后使用

进行样式设置

div.table-container table {}

Answer 3

使用Calum的样式格式，您可以这样做：

//Function that gets the SQL recordset. 
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
echo "<style>#size{height:100px;width:340px;overflow-y:scroll;}</style>";
echo "<table id='size' border='1'>
<tr>
<th>Facility</th>
<th>Process Flow</th>
<th>Operation</th>
<th>Device</th>
<th>Item</th>
<th>Value</th>
<th>Database Source</th>

</tr>";

while($row2 = oci_fetch_array($result2)){
echo "<tr>";
echo "<td>" . $row2['FACILITY_AT'] . "</td>";
echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
echo "<td>" . $row2['OPN_NAME'] . "</td>";
echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
echo "<td>" . $row2['SOURCE'] . "</td>";
echo "</tr>";
}
echo "</table>";

我测试了它并且工作正常。对于不同的表格样式，您可以：

<style>
#table1
{
style code here
}

#table2
{
style code here
}
</style>

依此类推......然后你可以将它们应用到表格中：

<table id="table1">
...
</table>
<table id="table2">
...
</table>

使用PHP在动态表创建中应用表格样式

3 个答案: