Table doesn't display Chrome - php

I have one of the weirdest problem I've ever faced. I have a website used by hundreds of people and I have a very strange issue. My code is the following (sample and example) :
<div id="DivTHead">
<!-- THIS doesn't display -->
<table id="THead">
<tr align="center">
<td class="ID">ID</td>
<td class="Date_Hour">Date and hour</td>
<td class="User">User</td>
........
</tr>
</table>
</div>
<div id="DivTBody">
<!-- This is working fine -->
<table id="TBody" border="1">
<?php
$SQL = $db -> query("SELECT * FROM rapport where ID = $ID ORDER BY Date_heure ");
while($ligne = $SQL -> fetch())
{
echo '<tr>';
echo "<td class=\"ID\">".$ligne['ID']."</td>";
echo "<td class=\"Date_Hour\">".date('d/m/Y H:i:s', strtotime($ligne['Date_Hour']))."</td>";
echo "<td class=\"User\">".$ligne['User']."</td>";
........
}
?>
</table>
</div>
The problem is that <div id="DivTHead"> doesn't display. If I inspect the element, it appers, but there isn't anything on screen. There is something weird... Not everyone have this problem. I'm facing it, but I asked dozens of people and none of them is facing this problem. I obviously cleared my cache and everything but still this problem. Here's my .css but it looks fine :
table, th, td {
/* border: 1px solid black;*/
text-align: center;
}
div#DivTBody {
width: 100%;
position: relative;
display: block;
overflow-y:scroll;
overflow-x:hidden;
height: 350px;
}
table#tbody {
width: 100%;
}
div#DivTHead {
width: 100%;
}
table#THead{
border-collapse:collapse;
border:none;
width: 98.8%;
}
.ID {
width: 2%;
text-align: center;
}
.Date_Hour{
width: 10%;
text-align: center;
}
.User{
width: 15%;
}
It is working fine on IE and Mozilla. Why is there this problem and how to avoid it?

Try disabling your extensions in Chrome. If you are the only one facing this problem in Chrome, it must be your browser blocking content somehow.

Related

How would I go about displaying my SQL data horizontally instead of vertically?

I need my data to be displayed in horizontal rows of 6 before dropping and creating a new row of 6 and so on...
My page right now. Red outlines to illustrate each individual row of data from phpmyadmin
I have tried to do this with just CSS, but it seems to not work by normal means because every new row of data displayed is automatically pushed down.
<?php
$records = mysqli_query($conn,"SELECT * FROM artists ORDER BY title");
while ($data = mysqli_fetch_array($records)) {
?>
<td>
<div class="grid-artists">
<div class="column-artists">
<div class="poster">
<?php
echo '<img class="round" src="'.$data["img"].' " width="150" height="150"/>';
?>
<br>
<br><td><?php echo $data['title']; ?></td><br>
<br>
</div>
</div>
</div>
</td>
<?php
}
?>
.poster {
width: 150px;
background:rgba(59, 59, 59, 0.5);
margin: 10px;
padding:10px;
color: aliceblue;
text-align: center;
border-radius: 10px;
}
.grid-artists {
display: grid;
grid-template-columns: min-content;
overflow: hidden;
}
.column-artists {
border: 1px solid rgba(255, 0, 0, 0.8);
float: left;
font-size: 20px;
text-align: center;
}

Updating table using PHP is overriding CSS formatting

I am using PHP to call data from a Microsoft SQL Database. That functionality is working, however when PHP updates the table's data it is overriding some of the formatting. One big specification I wanted was to have a max-height of 400px and once it crosses that the table becomes scroll-able.
Some context: I am running this on a local PHP server.
I have tried adding !important tags but that did not work.
<table id = 'tbl' class='table'>
<thead id = 'heading'>
<tr>
<td scope="col" >Applicant ▼</td>
<td scope="col">Grantee EIN</td>
<td scope="col">State</td>
<td scope="col">FAC Accepted Date</td>
<td scope="col">Expenditures</td>
<td scope="col">Prior Finding</td>
<td scope="col">Audit</td>
</tr>
</thead>
<div id = 'scrollbody'>
<tbody>
<?php
$result = array();
do {
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
echo '
<tr>
<td>'.$row["AUDITEENAME"].'</td>
<td>'.$row["EIN"].'</td>
<td>'.$row["STATE"].'</td>
<td>'.$row["FACACCEPTEDDATE"].'</td>
<td>'.$row["TOTFEDEXPEND"].'</td>
<td>'.$row["PYSCHEDULE"].'</td>
<td><input type="checkbox" oninput=""></td>
</tr>
';
}
} while (sqlsrv_next_result($stmt));
// sqlsrv_free_stmt($stmt);
// sqlsrv_close($conn); //Close the connnectiokn first
// echo json_encode($result); //You will get the encoded array variable
?>
</tbody>
</div>
</table>
#tbl {
margin: auto;
top: 0px;
height: 100%;
max-height: 400px;
position: relative;
font-family: 'Segoe UI';
box-shadow: 0px 0px 5px 2px rgb(240, 240, 240);
perspective: 1px;
border-radius: 0px 0px 20px 20px;
white-space: nowrap;
width: 100%;
z-index: 1;
}
What I want to see is a table of 400px height, but instead a table of much longer height is being displayed.
So, there are 2 options:
Wrap the table in with a wrapper and give the max-height to that element.
<div id="table-wrapper">
<table>
{Your stuff...}
</table>
</div>
Give the thead, tbody a display: block property. With which again your CSS styles will come into use.
First you need to know how a browser works.
The browser will not show anything until this steps are made:
Your browser request a file like html or php first.
Then it will check the styling (CSS/SCSS).
Checking for JavaScript.
checking for source like an image or other media.
Only then it will display the page.
So if you want to style after this process, you will need JavaScript.
JavaScript is invented to manipulate or modify the DOM (document object Model).
That means, you can point to an element and style it, remove it, add a new element etc.
For a better format I prefer jQuery.
jQuery is another way to code JavaScript. (jQuery = JavaScript, just in another form) jQuery calls the JS library.
you can't set header of a table, a table height is based on his content, if you need a table with a specific height you need to change the display type and add overflow rule:
#tbl {
margin: auto;
top: 0px;
height: 100px;
max-height: 400px;
position: relative;
font-family: 'Segoe UI';
box-shadow: 0px 0px 5px 2px rgb(240, 240, 240);
perspective: 1px;
border-radius: 0px 0px 20px 20px;
white-space: nowrap;
width: 100%;
z-index: 1;
display:block;
overflow:auto;
}
Here a live fiddle https://jsfiddle.net/g7fuLhyp/

Different sized rows in tables populated by php

So I made this div that is populated by php calls to my server to populate it with a table per entry in the Server table. Aka, a php script connects to my server, checks how many entries there are, and creates a table for each one to populate the div. So in the end there are several table entries displayed corresponding to each entry in the database.
I don't know of a jsfiddle/codepin type place that allows php since it's server-side so I took a picture to show what it looks like. The arrows are pointing to the two entries where the box they are in is wider than the others. This happens any time I do not include a link (an optional entry in the database). I assume this is because it is trying to fill the space left by having no link in the last table row, but the last part of my php script should have removed that last row if it was empty (assuming I wrote it correctly) and it shouldn't need to stretch to fill something no longer there.
So, what I'm asking here is how do I make each of the orange rows the same size?
Picture of the box: http://i67.tinypic.com/5k3nzs.png
HTML (Relevant portion)
<div id="announcements_box">
<h2>Announcements</h2>
<?php include "scripts/php/getAnnouncement.php";?>
<div class="bottom_color"></div>
</div> <!--end announcement_box-->
CSS (Relevant portion)
#announcements_box{
table-layout: fixed;
display: inline-block;
background-color: #FFFFFF;
width: 47%;
color: black;
margin-left: 1rem;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
#announcements_box h2{
font-weight: normal;
font-size: 2rem;
background-color: navy;
color: white;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.announcement_blocks{
width: 100%;
margin-bottom: .5rem; /* space after each block */
background-color: #C0C0C0;
}
.announcement_blocks img{
/* height: 75px; */
width: 75px;
margin: .5rem;
padding-top: 1rem;
}
.announcement_blocks td{
/* word-wrap: break-word;
word-break: break-all;
*/
}
.announcement_blocks td.title{
text-align: center;
background-color: #E18A07;
font-weight: bold;
}
.announcement_blocks td.descr{
padding-left: 1rem;
padding-right: 1rem;
}
.announcement_blocks td.link{
text-align: center;
/*
padding-left: 1rem;
padding-right: 1rem;
*/
}
.announcement_blocks td.img_s{
width: 1rem;
background-color: #330000;
}
.bottom_color{
height: 2.5rem;
background-color: navy;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
margin-top: -.5rem;
}
PHP (Relevant portion)
<?php require "scripts/php/database_connect.php"?>
<?php
$query = mysqli_query($con, "SELECT * FROM Announcements") or die("Error in query. Details: ".mysqli_error());
while($row = mysqli_fetch_assoc($query))
{
?>
<table class="announcement_blocks">
<tr>
<td class="img_s" rowspan="3"><?php echo "<img src='/img/announcement_icon/announcement_imp.png" . "' alt='announcement'>";?></td>
<td class="title"><?php echo $row['title']; ?></td>
</tr>
<tr>
<td class="descr"><?php echo $row['description']; ?></td>
</tr>
<?php if($row['link'] != "")
{
?>
<td class="link"><?php echo $row['link']; ?></td>
<?php
}
?>
</table>
<?php
}
?>
I know this is long and probably a bit confusing since I can't just hand you a fiddle or codepin to toy with but any ideas?
Thanks
In bottom if links are there its working, if not there its height increased.
to avoid this you can give
<?php if($row['link'] != ""){?>
<?php echo $row['link']; ?>
<?}else { echo "<br>";}?>
Try to use this php code:
<?php
$query = mysqli_query($con, "SELECT * FROM Announcements") or die("Error in query. Details: ".mysqli_error());
while($row = mysqli_fetch_assoc($query)){?>
<table class="announcement_blocks">
<tr>
<td class="img_s" rowspan="3"><?php echo "<img src='/img/announcement_icon/announcement_imp.png" . "' alt='announcement'>";?></td>
<td class="title"><?php echo $row['title']; ?></td>
</tr>
<tr>
<td class="descr"><?php echo $row['description']; ?></td>
</tr>
<tr>
<td class="link">
<?php if($row['link'] != ""){?>
<?php echo $row['link']; ?>
<?}?>
</td>
</tr>
</table>
<?}?>

I am trying to display information in a table format from sql database what am I doing wrong?

Ok I can display data on to the page from the database but I am having a problem displaying it nicely in a table format so its under headers and gos down the page. This is what has happened at the moment:
Here is my page code:
<link rel="stylesheet" href="css/productiontable.css">
<?php
error_reporting(0);
require './db/connect.php';
include './includes/header.php';
?>
<h2>Productions</h2>
<div class="productiontable">
<table>
<tr>
<th>Production Name</th>
<th>Production Description</th>
<th>Production Type</th>
</tr>
<tr>
<td class="productname">
<?php
if($result = $connection->query("SELECT * FROM Production")){
if($count = $result->num_rows){
while($row = $result->fetch_object()){
echo $row->ProductionName;
?>
</td>
<td class="productinfo">
<?php
echo $row->ProductionInformation;
?>
</td>
<td class="producttype">
<?php
echo $row->ProductionType;
}
?>
</td><bR>
</tr>
</table>
<?php
$result->free();
}
}
mysqli_close($connection);
include './includes/footer.php';
Here is the css for the table:
#import url(http://fonts.googleapis.com/css?family=Dosis);
h2{
text-align: left;
color: white;
font-family: 'Dosis';
margin: 10px;
font-size: 32px;
}
h3{
font-size: 18px;
color: white;
margin: 20px;
}
.productiontable{
width: 900px;
border: 1px black solid;
margin: 10px;
}
.productname{
width: 200px;
float: left;
font-weight: bold;
margin-left: 10px;
}
.productinfo{
width: 500px;
float: left;
margin-left: 10px;
}
.producttype{
width: 200px;
float: left;
font-style: oblique;
margin-left: 10px;
}
Please help as much as possible many thanks :)
There are a couple of things wrong:
1. The br tag is not needed.
2. The loop should be outside of the tr. This way a new row will be made for every row.

Background-image moves when zooming also can't align text in a table

That's how the page looks like currently: http://i.imgur.com/nEHLFUX.png[1] and there are couple of bugs that I would love you to help me with. 2 main ones I want the spell names to be aligned to the right next to little icons of spells and second of all there is a background picture and when I zoom the site out it moves downwards and to the left and I want it to always stay at the same place.
Now code:
class spell {
function do_spell($spellicon, $spellname, $spelltext, $changeinpower) {
echo '
<div class="spellrow">
<table class="spelltable" cellpadding="0" cellspacing="0">
<tr>
<td ><img class="spellimage" src="/abilities/'.$spellicon.'"></td>
<td class="spellname">'.$spellname.' - </td>
<td class="spelldesc">'.$spelltext.'</td>
<td class="changeinpower"><img src="/icons/'.$changeinpower.'"></td>
</tr>
</table>
</div>
';
}
}
patch.php part
$karthus = new splash;
$laywaste1 = new spell;
$laywaste2 = new spell;
$karthus->do_splash('Karthus','cropkarthus','Karthus_0.jpg');
$laywaste1->do_spell('64px-Lay_Waste.jpg','Lay Waste (Q)','Added a new indicator that shows the full area of effect','new.png');
$laywaste2->do_spell('64px-Lay_Waste.jpg','Lay Waste (Q)','Added crit-style combat text and a unique sound effect for double-damage Qs','new.png');
Some css:
.spellrow {
width: 900px;
padding: 0;
margin-bottom: 3px;
background-color: #ffffff;
box-shadow: 1px 1px #cccccc; }
.spelltable {
width: 100%;}
.spellimage {
width: 32px;
height: 32px;
padding-left: 5px;}
.spellname {
white-space: nowrap;
padding: 0 5px;
width: 10px;}
.spelldesc {
font-size: 15px;
line-height: 1.05em;}
.changeinpower {
width: 60px;}
/* And now the img in the background part */
.season2014
{
background-color:#f1f1f1;
background-image: url('/season_graphic/SEASON2014_2.png');
background-repeat: no-repeat;
background-position: 20% 50%;
background-origin: content-box;
background-position: fixed; }
<body class="season2014";>
PS. any kind of mistakes in code I would love you to point out I'm really new to the web-designing thingy
The problem with the background moving is from the background-position: fixed. This fixed value is not valid CSS. Try playing with the values available for the property to get the desired effect. More info on the Mozilla Dev Network for CSS with the background-size property.
About the name, I haven't seen any text-align: left in your CSS, that's maybe what you're looking for in your .spellname property. But more than that, the alignment problem comes from the width which is just width: 10px; in the .spellname property.
Because you fixed the total row width to 900px, why not use pixels all the way to define all the widths ? Like so:
.spellrow {
width: 900px;
padding: 0;
margin-bottom: 3px;
background-color: #ffffff;
box-shadow: 1px 1px #cccccc;
}
.spelltable {
width: 100%;
}
.spellimage {
width: 32px;
height: 32px;
padding-left: 5px;
}
.spellname {
white-space: nowrap;
padding: 0 5px;
text-align: left;
width: 150px; /* Adapt to your needs */
}
.spelldesc {
font-size: 15px;
line-height: 1.05em;
text-align: left;
width: 658px; /* Adapt to your needs */
}
.changeinpower {
width: 60px;
}
And the corresponding HTML code
<div class="spellrow">
<table class="spelltable" cellpadding="0" cellspacing="0">
<tr>
<td class="spellimage">IMG</td>
<td class="spellname">Name</td>
<td class="spelldesc">Text with plenty of info here</td>
<td class="changeinpower">IMG</td>
</tr>
</table>
</div>
On a side note, doing one table per item is loosing the whole purpose of tables: one item is one row of the table. You should have one table per category and each spell being a row in the according table.

Categories