CSS无法将表宽度设置为具有屏幕宽度的动态

时间:2016-08-11 11:46:17

标签: php html mysql css

我的CSS问题,到目前为止,我不擅长但我似乎无法解决我的表格不会根据屏幕宽度显示的问题。它曾经是静态的,但由于将值更改为屏幕的%,因此它没有对我的表进行任何可视化更改。 (根据答案/评论更新)

HTML / PHP

//Table Titles row
echo "<div class='tablediv' style='width:100%; border: 5px solid black'><table name ='ipv4' class='tableparent'><td class='tabled' width='100%'>IP Address</td><td class='table'>Subnet</td><td class='table'>PC Name</td><td class='table'>Owner</td><td class='table'>Customer</td><td class='table'>Customer Site</td></tr>";

//loops through search results and echo table

while ($row = mysqli_fetch_array($view)){

    $id = $row['companyId'];
    $company = $customers[$id];

    echo "<tr><td class='tabled'>". $row['ip']."</td><td class='table'>". $row['Subnet']."</td><td class='table'>".$row['hostName']."</td><td class='table'>". $row['owner']."</td><td class='table'>". $company ."</td><td class='table'>".$row['siteName']."</td></tr>";
    }
    echo"</table></div>";

CSS

.table
{
  border:1px solid black;
  text-align: left;
  padding:10px;
  width:12%;
  overflow:hidden;  
}

.tabled
{
  top:500px;
  border:1px solid black;
  text-align: left;
  width:40%;
  overflow: hidden;     
}   

.tableparent
{
  border:1px solid black;
  border-collapse:collapse;
  width: 95%;
  text-align: left;
  padding:15px;
  table-layout:fixed;
}
.tablediv
{
  position:absolute;
  width: 95%;
  top:70px;
}

目前显示的表格如下所示

updated image of table

2 个答案:

答案 0 :(得分:0)

添加宽度=&#34; 100%&#34;在表标记中,它将全宽度设置为父div宽度

echo "<div class='tablediv' style='width:100%'><table width='100%' name ='ipv4' class='tableparent'><td class='tabled'>IP Address</td><td class='table'>Subnet</td><td class='table'>PC Name</td><td class='table'>Owner</td><td class='table'>Customer</td><td class='table'>Customer Site</td></tr>";

答案 1 :(得分:0)

发现问题,该页面由ajax发布。然后我发现搜索结果的div被另一个div意外包围,限制了它的宽度。谢谢你的帮助