I want to modify my table by CSS, but it doesn't work, the only CSS part that doesn't work is the table.
The rest of the CSS works correctly.
The PHP code:
<table style="width:100%">
<tr>
<td>Nif</td>
<td>Nom</td>
<td>Cognoms</td>
<td>Data</td>
<td>Provincia</td>
</tr>
<?php
while ($fila = mysqli_fetch_row($resultado2)) {
$Nif =$fila[0];
$Nombre=$fila[1];
$Cognoms=$fila[2];
$Fecha=$fila[3];
$Provincia=$fila[4];
echo"<tr>";
echo"<td>$Nif</td>";
echo"<td>$Nombre</td>";
echo"<td> $Cognoms</td>";
echo"<td> $Fecha</td>";
echo"<td>$Provincia</td>";
echo"</tr>";
echo" </table>";
}
mysqli_close($con);
?>
Part of the CSS:
input#boton{
color:white;
font-size:2em;
background-color:#00BFFF;
height:0.8cm;
border:2px;
width:80%;
margin-top:1%;
margin-left:10%;
-webkit-border-radius:5px;
-ms-border-radius:5px;
-moz-border-radius:5px;
}
input#boton:hover{
background-color:#2EFE2E;
}
table, th, td {
border: 2px solid black;
color: blue;
width: 50%;
font-size: 150%;
text-align:center;
background-color:yellow;
}
Any help would be appreciated .
For each row, you print echo" </table>"; You should put it at the end of the while loop.
You have an error in your Php code. you must not print table in each row.
while(){
}
Related
this is my first post and im already totally confused about my project right now :x
im able to make a successful connection to the sql db and also receive my data which displays on the top left, BUT its supposed to display in a html table, not somewhere on the screen :O
Here is the website to see the code in action, though there is none yet!
http://blackskill.square7.ch/
Here is the code which is running fine, but maybe im just too stupid and new for coding yet xd
<!DOCTYPE html>
<?php
$connection=mysqli_connect("localhost","username","password","db_name");
if ($connection) {
echo "database online <br>";
} else {
die("Connection failed. Reason: ".mysqli_connection_error());
}
$sql="SELECT * FROM blackskill_playerdb";
$results=mysqli_query($connection,$sql);
if (mysqli_num_rows($results)>0) {
while($row=mysqli_fetch_array($results)) {
echo '<tr>
<td>'.$row[0].'</td>
<td>'.$row[1].'</td>
<td>'.$row[2].'</td>
<td>'.$row[3].'</td>
</tr>';
echo "<br>";
}
}
mysqli_close($connection);
?>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2><center>Inofficial S.K.I.L.L. - Special Force 2 - Dishonor List</center></h2>
<input type="text" id="myInput" onkeyup="aa" placeholder="Search for player..." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:40%;">Player</th>
<th style="width:20%;">Clan</th>
<th style="width:20%;">Evidence</th>
<th style="width:20%;">Added to list</th>
<?php while($row=mysqli_fetch_array($results)) : ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['clan']; ?></td>
<td><?php echo $row['rulebreak']; ?></td>
<td><?php echo $row['addlist']; ?></td>
</tr>
<?php endwhile ?>
</tr>
</table>
<tbody>
</body>
</html>
i hope we can find an answer together with friendship, emotions and friendship!
regards
I have one table which is displaying proper in desktop. I want to change the layout or structure of table in mobile. Please check below image. I have to display like that. I have to display all the information in one row in mobile.Would you help me in this?
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<?php
if (isset($result_all_records->num_rows) > 0) {
// output data of each row
while($row = $result_all_records->fetch_assoc()) {
echo "
<tr>
<td>{$row['id']}</td>
<td>{$row['Name']}</td>
<td>{$row['Email']}</td>
<td>{$row['Mobile']}</td>
";
}
}
else {
echo "No records found";
}
?>
</tbody>
</table>
I found the solution from http://codepen.io/anon/pen/QwPVNW
We have to add `data-label='column name' and need to use below code in media queries. it will work
echo "
<tr>
<td data-label='id'>{$row['id']}</td>
<td data-label='Name'>{$row['Name']}</td>
<td data-label='Email'>{$row['Email']}</td>
<td data-label='Mobile'>{$row['Mobile']}</td>
";
#media only screen and (max-width: 384px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: left;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
margin-right: 20px;
}
}
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>
<?}?>
Having a problem in IE with CSS nowrap in IE, works perfectly in Chrome. Can anyone help out so it renders without any wrapping in IE and Chrome?
HTML
<div id="sub_cont"></div>
CSS
#content{
height:14px;
text-align: left;
text-decoration: none;
width: 450px;
padding-top:25px;
white-space: nowrap;
}
#content #sub_cont{
width: 450px;
display:none;
height:14px;
}
#content .no-rec{
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding:5px;
border-bottom:solid #000;
text-align:left;
background:#EBEBEB;
}
#content .each_rec {
background: none repeat scroll 0 0 #EBEBEB;
border-bottom: medium solid #000000;
color: #000;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
padding: 5px;
height:12px;
}
PHP
<?php
echo "<h2>Search Result</h2>";
echo "<table border='0' id='content' cellspacing='2' cellpadding='5'>
<tr bgcolor='#FFFFCC'>
<th>VM Name</th>
<th>vCenter Name</th>
</tr>";
while ($row = sqlsrv_fetch_array($result))
{
echo "<tr class='each_rec'>";
echo "<td>" . $row['VM_NAME'] . "</td>";
echo "<td>" . $row['VCENTER_NAME'] . "</td>";
echo "</tr>";
}
echo "</table>";
if($total==0){ echo '<div class="no-rec">No Record Found !</div>';}?>
In internet explorer we must use the whiteSpace property in order to nowrap text, the documentation for the usage of whiteSpace is linked below. Good luck, and remember to use the most recent version of IE in order to maintain accuracy.
Link: http://msdn.microsoft.com/en-us/library/ie/ms531182(v=vs.85).aspx
Reference url
https://stackoverflow.com/a/18129006/1312610
http://css-tricks.com/almanac/properties/w/whitespace/
Try it for ie
white-space: normal;
Below i have added my css file and my html file i need to color my table with alter name color but its not working i don't know where i have done the mistake.
CSS FILE :-
table.gridtable{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
float:center;
border-width:1px;
border-style:groove;
border-color:black;
border-collapse:collapse;
width:600px;
}
table.gridtable th{
border-width:1px;
padding:3px;
border-style:solid;
border-color:black;
}
table.gridtable td{
border-width:1px;
padding:3px;
border-style:solid;
border-color:black;
}
.oddrowcolor{
background-color: black;
}
.evenrowcolor{
background-color: red;
}
table.gridtable td.darkcol{
border-top:0px;
border-bottom:0px;
border-right: 1px;
}
table.gridtable td.emptycol{
border-bottom:0px;
border-right: 1px;
}
HTML & PHP:-
<table class="gridtable" id="alternatecolor" align="center"
<tr><th>disease Name/th><th>Gene Name/th><th>OMIM Number</th></tr>
<?php
$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
$selected = mysql_select_db("missensencemuttation",$dbhandle) or die("Could not select disease");
$result = mysql_query("SELECT DISTINCT * FROM `gene_data` ORDER BY disease_name");
$last=" ";
while($row = mysql_fetch_array($result))
$now=$row[2];
if($last != $now){
$rcnt=mysql_query("select count(gene_name) from gene_data where gene_name='$now'");
if($rcnt==1){
echo "<tr><td>";
echo "<a href='d1.php?d_name=".$row['disease_name']."'>".$row['disease_name'];
echo "</a></td>";
echo "<td>".$row['gene_name']."</td>";
echo "<td>".$row['ommi_number']."</td></tr>";
}
else{
echo "<tr><td class='emptycol'>";
echo "<a href='d1.php?d_name=".$row['disease_name']."'>".$row['disease_name'];
echo "</a></td>";
echo "<td>".$row['gene_name']."</td>";
echo "<td>".$row['ommi_number']."</td></tr>";
}
}
else
{
echo "<tr'>";
echo "<td class='darkcol'>";
echo ' ';
echo "</td>";
echo "<td>".$row['gene_name']."</td>";
echo "<td>".$row['ommi_number']."</td></tr>";
}
$last=$row[2];
can any one help me with this ??
Maybe I'm misunderstanding, but it looks like you want to apply oddrowcolor or evenrowcolor to alternating rows - but in your actual php/html, I don't see those class names anywhere. They're not being put on the rows, so their rules wont be applied. Just add them to the appropriate <tr> tags in your php and it should work.
Alternatively you could use the nth-of-type selector to apply the rules without altering your php:
tr:nth-of-type(odd) {
background-color: black;
}
tr:nth-of-type(even) {
background-color: red;
}
If you want alternate colors for each table row, then a simple CSS should do it. This way, if you want to insert new rows dynamically, it will adjust the colors automatically.
.stripped-rows:nth-child(odd){
background-color:red;
}
.stripped-rows:nth-child(even){
background-color:blue;
}
and html ...
<table>
<tr class = 'stripped-rows'>
<td>sad</td>
</tr>
<tr class = 'stripped-rows'>
<td>sad</td>
</tr>
<tr class = 'stripped-rows'>
<td>sad</td>
</tr>
DEMO