Targeting specific class inside table with ID using CSS - Changing ROW background - php

I have a table that looks like this:
<table class="table table-striped table-hover table-responsive" id="commenttable">
<thead>
<th>Status</th>
<th>Subject</th>
<th>Message</th>
<th>Tech</th>
<th>Emailed?</th>
<th>Date/Time</th>
</thead>
<tbody>
<?php
foreach($commresult as $row)
{
if($row['commentPrivate'] == 'yes'){
echo "<tr class='private'>";
}
else{
echo "<tr>";
}
echo "<td>" . ucwords($row['commentType']) . "</td>";
echo "<td>" . ucwords($row['commentSubject']) . "</a></td>";
echo "<td>" . $row['commentMessage'] . "</td>";
echo "<td>" . ucwords($row['commentBy']) . "</td>";
echo "<td>" . ucwords($row['commentEmailComm']) . "</td>";
echo "<td>" . $row['commentDate'] . "</td>";
echo "</tr>";
}
?>
</tbody>
What I'm trying to do is if $row['commentPrivate'] == 'yes' I want to change the background color of just that row to red.
I've tried just using <tr bgcolor="#ff7f7f"> which didn't work. So now I'm just trying to add the class 'private' to the row and target it using CSS, which I think I'm failing at miserably.
Here's the css:
.private {
background-color: #ff7f7f;
}
I've also tried:
#commenttable tbody .private {
background-color: #ff7f7f;
}
Any help is appreciated.

#commenttable .private {
background-color: #ff7f7f !important;
}

.table-striped class adds zebra-stripes to a table. So to override the same, you can put !important in your CSS like this:
.private {
background-color: #ff7f7f !important;
}
Here is a Demo
.table .table-striped is more specific than .private. Hence the rules for .table-striped prevails.
So, you can use !important to override the same.
The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise.

Related

echo <tr> with a href inside not working

I'm pretty confused about the fact that I have this code:
while($row = mysql_fetch_array($result)) {
echo "<tr href='http://google.com'>";
echo "<td>" . $row['rowname'] . "</td>";
echo "<td>" . $row['rowname2'] . "</td>";
echo "<td>" . $row['rowname3'] . "</td>";
echo "<td>" . $row['rowname4'] . "</td>";
echo "</tr>";
}
and for some reason my link doesn't work. I've tried putting a tag around the tr but with no success. Somebody to have a clue?
Guess you are looking for link to entire row. This can be achieved by having onClick function on the row, instead of using href.
<tr onClick="location.href='target url'">
<td></td>
<td></td>
</tr>
while($row = mysql_fetch_array($result)) {
echo "<tr onclick='window.location.href = \"http://google.com\";'>";
echo "<td>" . $row['rowname'] . "</td>";
echo "<td>" . $row['rowname2'] . "</td>";
echo "<td>" . $row['rowname3'] . "</td>";
echo "<td>" . $row['rowname4'] . "</td>";
echo "</tr>";
}
If you want to make entire row clickable and work like an a tag you should use javascript for this:
echo "<tr onclick='location.href = \"http://google.com\"'>";
And then it would be nice to add CSS cursor pointer to clickable table cells:
tr td {
cursor: pointer;
}
a tr-tag has no href attribute, see here.
you can do something like:
<tr>
<td>
Google
</td>
....
</tr>
Another Solution would be adding javascript if the whole row should be clickable:
<tr onclick="window.location.href = google.com">
<td>
<a href="google.com"</a>
</td>
....
</tr>

Style 1 <td> in a table with 2 <td>s

I have a table that gets it´s content from a database, and I want to make the text in the column to the right align-right. I know how to do it when its HTML and the content is in the code, but I can't get it to work when the content is outputted from a database.
Down here you can see my code for the table: (in the collumn "ingredienser", I want to set the text-align to right.
<?php
$con = mysql_connect("****","****","****");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("paj", $con);
$result = mysql_query("SELECT * FROM meny");
echo "<div id='menyer'>";
echo "<table border='1'>
<tr>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<div class='mall" . $row['mall'] . "'>";
echo "<tr>";
echo "<td>" . $row['namn'] . "</td>";
echo "<td>" . $row['ingredienser'] . "'</td>";
echo "</tr>";
Just add some CSS above your php code
<style>
table td {
text-align: right;
}
</style>
The above will right align text inside table cells
echo "<td><div align='right'>" . $row['ingredienser'] . "'</div></td>";
if this is the extent of your table, then you can definitely just use the following css:
.mall{
text-align:right;
}
I would suggest putting it in your external css file, but if you don't have one, then put it in a style tag inside of your body or table tag, depending on what kind of scope you want it to have like this:
<style>
.mall{
text-align:right;
}
</style>
set align="right" to your tr
while($row = mysql_fetch_array($result))
{
echo "<div class='mall" . $row['mall'] . "'>";
echo "<tr align='right'>";
echo "<td>" . $row['namn'] . "</td>";
echo "<td>" . $row['ingredienser'] . "'</td>";
echo "</tr>";
Just add styling to that one particular cell, it will apply to the entire column as it loops. As such,
echo "<td style=\"text-align:right;\">" . $row['ingredienser'] . "'</td>";
If you align the Table TD to text-align:right, EVERY single cell will be effected.

Freeze panes in a HTML table

I need to freeze the first row for the below table, here's my current code below
Please let me know if you need anymore information
Here's an image of the table:
<head>
<style>
table,td,th
{border-collapse:collapse;}
table.myTable td, table.myTable th { border:1px solid black;padding:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#2C3539;
font-size:0.80em}
table
{width:100%;}
th{background-color:#B6B6B4;
height:10px;}
</style>
<table class="myTable">
<?php
//MySQL Database Connect
include 'connect.php';
echo "
<tr>
<th>Name</th>
<th>Location</th>
<th>Email</th>
<th>Mobile</th>
<th>IMEI</th>
<th>Phone</th>
<th>Message</th>
</tr></Freezing>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Name'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td>" . $row['Email'] . "</td>";
echo "<td>" . $row['Mobile'] . "</td>";
echo "<td>" . $row['IMEI'] . "</td>";
echo "<td>" . $row['Phone'] . "</td>";
echo "<td>" . $row['Message'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
What you could do instead is use the <thead> to segment your <th> tags. Then you could use either absolute of fixed positioning to have that section float above the others. Here is an example:
HTML
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Email</th>
<th>Mobile</th>
<th>IMEI</th>
<th>Phone</th>
<th>Message</th>
</tr>
</thead>
<tbody>
...
</tbody>
CSS
thead {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%
z-index: 100;
}
You may also need to add some padding to the top of the <tbody> tag so that the frozen row does not sit over top of any data. Additionally, absolute positioning will be relative to the nearest positioned ancestor, so you may need to add a position to the table as well.
table {
position: relative;
}
tbody {
padding-top: 1em;
}
try this it's using jquery though Freeze Header

Apply Table Style in Dynamic Table Creation with PHP

I am having trouble applying CSS styles to my dynamic table. I am connecting to a database and I know the data is populated correctly and displaying. My issue is that there are 900 records and I want to limit the table size, utilizing a scrollbar. I have read elseware that the proper CSS style nodes to accomplish this are: How to specify table's height such that a vertical scroll bar appears?
overflow: auto;
height: 700px;
display: block;
overflow-y: scroll;
At first I attempted this with inline styling (a no-no.. I realize), but it didn't work. I have read about adding a 'class' to the table and/or individual rows, which would then be reflected in my CSS style sheet, but I can't seem to figure out how to accomplish this. I get syntax errors when I add 'span' or 'class' tag designators to the PHP (I imagine from utilizing 'ECHO' - which both require double quotes).
Good example of what I'm trying to accomplish: http://www.timrivera.com/tests/csstables.html#markupIE
The PHP code snippet below has good syntax, but I don't know where to add the class or span designators appropriately. One thing to note - I need to have different styles for different tables, so changing the global 'table' CSS isn't going to work.
//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>";
I think the best way would be to wrap a div around the table and give the div a height.
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>
Using your code:
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>";
Edit your PHP code to...
//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>";
Then just style using
div.table-container table {}
Using Calum's style format you could do this:
//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>";
I tested it and works fine. And for the different table styles you could:
<style>
#table1
{
style code here
}
#table2
{
style code here
}
</style>
and so on... then you could apply them to the tables:
<table id="table1">
...
</table>
<table id="table2">
...
</table>

how to make the table scrollable with fixed header and the table content from mysql

How can I make this table scrollable? I've tried different code but I always encounter a problem on this line: $avaya=mysql_query("SELECT * From avaya_pabx");. Other code that I've used had a problem when I echoed the <td>.
Here is my code:
<div id="pageContent">
<title>Avaya PABX</title>
<table class='hovertable'>
<tr>
<th width="31">---</th>
<th width="12%">Critical Spare ID</th>
<th width="11%">Serial No.</th>
<th width="8%">Comcode</th>
<th width="9%">Version</th>
<th width="12%">Circuit Pack</th>
<th width="13%">Classification</th>
<th width="8%">Location</th>
<th width="12%">Availability</th>
<th width="5%">Date</th>
<th width="7%">Client</th>
</tr>
<?php
$avaya=mysql_query("SELECT * From avaya_pabx");
$alternate=0;
while ($row=mysql_fetch_array($avaya))
{
$alternate++;
if ($alternate==3)
$alternate=1;
echo "<tr class=class$alternate onmouseover=\"this.style.backgroundColor='#ffff66';\" onmouseout=\"this.style.backgroundColor='#d4e3e5';\">";
echo "<td><font size=1>[Delete]</font></td>";
echo "<td>" . $row['critical_spare_id'] . "</td>";
echo "<td>" . $row['serial_no'] . "</td>";
echo "<td>" . $row['comcode'] . "</td>";
echo "<td>" . $row['version'] . "</td>";
echo "<td>" . $row['circuit_pack'] . "</td>";
echo "<td>" . $row['classification'] . "</td>";
echo "<td>" . $row['location'] . "</td>";
echo "<td>" . $row['availability'] . "</td>";
echo "<td>" . $row['date'] . "</td>";
echo "<td>" . $row['client'] . "</td>";
}
?>
</table>
<style>
#pageContent
{
width:100%;
height:18cm;
overflow:scroll;
}
</style>
echo the table contents into new table inside of a div that has the following css applied to is:
width:auto; /* or what you need it to be */
height: 500px; /* make this the size you want the data to be displayed in */
overflow: auto; /* this adds the scroll bars to the div when any data exceeds its hieght */
All you need is to add
table tbody{
display: block;
height: 150px;
overflow-x: auto;
overflow-y: scroll;
}
in height add the default one that you need

Categories