Strange CSS Layout problem in certain browsers - css
I'm working on a tee-sheet display for a golf club. While the code originates in PHP with some logic to control the display, I am having a problem that seems to originate in the CSS.
I've run it through the W3C Validator, and it doesn't identify the problem.
In the PHP code, I split the list of tee times into two tables. I expected them to be independent in their own div elements.
The code is posted below.
Viewed in Firefox everything seems normal. But in Edge or Chrome, the bottom edge and box-shadow effect of the left hand table wraps to the top of the right hand table.
I can't figure this out. Can anyone point me in the direction of what's causing this?
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEE SHEET TEST</title>
<meta charset="utf-8">
<meta http-equiv="refresh" content="60">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
--th-bg-color: #CAE1FF; /* f7f9fb #B0C4DE #5085a5 528B8B 7AC5CD CAE1FF */
}
/* ---------------------------------------------------------------------------------------------------- import fonts ---------- */
#import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght#400;600;700&family=Lato&family=Roboto+Mono&family=Ubuntu:wght#300;400&display=swap');
/* ----------------------------------------------------------------------------------------- base element formatting ---------- */
div {border:0px dashed red;}
body {
margin: 0;
font-family:tahoma;
font-size: 13px;
padding:1em 3em;
background-color: #4F7942; // fern green
background-color: #018749;
background-color: #DAF7A6;
background-color: #FFFFFF;
background-color: #A9BA9D; //
}
/* ----------------------------------------------------------------------------------------------------- page layout ---------- */
#TeeSheetContainer {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}
.column {
border:0px dashed green;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.left-col {
margin-right:.5em;
}
.right-col {
margin-left:.5em;
}
.headerbox {
border:0px dashed blue;padding:0em;
margin-top:.5em;
margin-bottom:1em;
display: inline-block;
width:100%;
height:125px;
}
#outer-div {
width: 100%;
text-align: center;
/* background-color: #0666a3; */
}
.inner-div {
border:0px dashed teal;
display: inline-block;
margin: 0 auto;
height:100%;
/* background-color: #8ebf42; */
}
/* ------------------------------------------------------------------------------------------ table formatting ---------- */
.listtable {
border-collapse: collapse;
width:100%;
margin-top:1em;
margin:auto;
background-color: #F8F8FF;
}
.listtable th {
font-weight: bolder;
padding-top:.5em;
display:normal;
}
.listtable tr {border-left:1px solid silver;border-right:1px solid silver;}
.listtable td, th {padding:.175em .5em;border:1px solid silver;font-size:90%;text-align:left;vertical-align: middle;}
.listtable th {background-color:#CAE1FF;}
.listtable th {background-color:#8F9779;color: #F0F0F0}
.listtable th:nth-child(1) {text-align:right;padding-right:1.5em;}
.listtable td:nth-child(1) {text-align:right;}
.listtable th:nth-child(2) {text-align:center;}
.listtable td:nth-child(2) {text-align:center;}
.listtable td:nth-child(3) {width:21%;}
.listtable td:nth-child(4) {width:21%;}
.listtable td:nth-child(5) {width:21%;}
.listtable td:nth-child(6) {width:21%;}
.listtable tr:nth-child(even) {background: #F0F0F0;}
.listtable tr:nth-child(odd) {background: #E0E0E0;}
/* ------------------------------------------------------------------------------------------------------ misc ---------- */
.pagetitle {
border:0px dashed red;
padding-top:.5em;
font-weight:800;
font-family:Calibri;
font-size:500%;
font-size:500%;
color:#104E8B;
text-shadow: 2px 2px 2px #aaa;
text-shadow: 1px 1px 0px rgba(160,172,206,0.3);
}
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.TeeTimePast {color:grey;}
.TeeTimeFuture {color:black;}
.TeeTimeNext {color:red;font-weight:700;}
/* TEST - See if CSS can be injected into the Env Canada weather widget */
#wxlink {
color:red !important;
}
</style>
<script>
setTimeout('ReloadPage()', 10000);
function ReloadPage() {
$("#TeeSheetContainer").load(location.href + " #TeeSheetContainer > *");
}
</script>
</head>
<body onload="startTime()">
<div style="">
<div id='outer-div' class='headerbox' style=''>
<img src='https://example.com/logo.png' style='height:125px;float:left;' class='inner-div' alt='Logo'>
<div class='pagetitle inner-div' style='float:right;padding-right:1rem;'>
<div id="txt"></div>
<script>
function startTime() {
// -------------------- date/time display for top of page --------------------
const today = new Date();
let y=today.getYear()
if (y < 1000)
y+=1900
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
let month=today.getMonth()
let daym=today.getDay()
let ordinal = dateOrdinal(today.getDate());
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
if (h > 12) {h = h - 12}; // Convert hour to 12h clock if necessary
document.getElementById('txt').innerHTML = dayarray[daym] + ", " + montharray[month] + " " + ordinal + " " + h + ":" + m;
setTimeout(startTime, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
function dateOrdinal(dom) {
// see https://stackoverflow.com/questions/15397372/javascript-new-date-ordinal-st-nd-rd-th
if (dom == 31 || dom == 21 || dom == 1) return dom + "st";
else if (dom == 22 || dom == 2) return dom + "nd";
else if (dom == 23 || dom == 3) return dom + "rd";
else return dom + "th";
};
</script>
</div>
</div>
<div id='TeeSheetContainer' style='column-count:2;-moz-column-count:2;-webkit-column-count:2;border:0px dashed red;'>
<div class='row'>
<div class='column left-col'>
<table class='listtable'>
<thead>
<tr><th>Time</th><th>Tee</th><th>Player 1</th><th>Player 2</th><th>Player 3</th><th>Player 4</th></tr>
</thead>
<tbody>
<tr class='TeeTimePast'><td>7:00 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:09 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:18 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:27 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:36 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:45 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>7:54 AM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>8:03 AM</td><td>18-A</td><td>Barnes, Owen</td><td>Kerry, Dixon</td><td>Phil, Quinn</td><td>Rodrigo, Shea</td></tr>
<tr class='TeeTimePast'><td>8:12 AM</td><td>1</td><td>Jaxx, Hebert</td><td>Natan, Blankenship</td><td>Aj, Hall</td><td>Snyder, Elizabeth</td></tr>
<tr class='TeeTimePast'><td>8:21 AM</td><td>1</td><td>Sam, Dotson</td><td>Dolly, Rose</td><td>Andreas, Barker</td><td>Sarah-Jayne, Wilson</td></tr>
<tr class='TeeTimePast'><td>8:30 AM</td><td>1</td><td>Mark, Harvey</td><td>Katharine, Hayes</td><td>Beverly, Cervantes</td><td>Matilda, Greene</td></tr>
<tr class='TeeTimePast'><td>8:39 AM</td><td>1</td><td>Benedict, Munro</td><td>Neil, Farrington</td><td>Keagan, Miranda</td><td>Darlene, Tucker</td></tr>
<tr class='TeeTimePast'><td>8:48 AM</td><td>1</td><td>Lacie, Turner</td><td>Angus, Barlow</td><td>Dante, Wise</td><td>Irfan, Thatcher</td></tr>
<tr class='TeeTimePast'><td>8:57 AM</td><td>1</td><td>Addison, Mcknight</td><td>Flynn, Bryant</td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>9:06 AM</td><td>1</td><td>Rizwan, Whyte</td><td>Mackenzie, Rankin</td><td></td><td>Larimer, Lynne</td></tr>
<tr class='TeeTimePast'><td>9:15 AM</td><td>1</td><td>Ernie, Kim</td><td>Amy-Leigh, Whittle</td><td>Lennie, Chen</td><td></td></tr>
<tr class='TeeTimePast'><td>9:24 AM</td><td>1</td><td>Kristin, Ross</td><td></td><td>Lukasz, Sykes</td><td></td></tr>
<tr class='TeeTimePast'><td>9:33 AM</td><td>1</td><td>Cherry, Nixon</td><td>Victoria, Salt</td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>9:42 AM</td><td>1</td><td>Lennie, Chen</td><td>Izabella, Graves</td><td>Patricia, Goddard</td><td></td></tr>
<tr class='TeeTimePast'><td>9:51 AM</td><td>1</td><td>Lukasz, Sykes</td><td>Kadie, Brett</td><td>Lizzie, Walmsley</td><td>Auger, Paul</td></tr>
<tr class='TeeTimePast'><td>10:00 AM</td><td>1</td><td>Lana, Milne</td><td>Bradley, Donnelly</td><td>Marwan, Kramer</td><td>McCormack, Phil</td></tr>
<tr class='TeeTimePast'><td>10:09 AM</td><td>1</td><td>Eddie, Dean</td><td>Lilith, Daly</td><td>Gladys, Sampson</td><td></td></tr>
<tr class='TeeTimePast'><td>10:18 AM</td><td>1</td><td>Elaine, Parker</td><td>Kiefer, Clifford</td><td>Briony, Walter</td><td>Thrasher, Kerry</td></tr>
<tr class='TeeTimePast'><td>10:27 AM</td><td>1</td><td>Allegra, Mccoy (9)</td><td>Pollyanna, Sweet (9)</td><td>Padraig, Colley (9)</td><td>Shields, Marylyn (9)</td></tr>
<tr class='TeeTimePast'><td>10:36 AM</td><td>1</td><td></td><td>Fynn, Gordon</td><td>Shivani, Cooper</td><td>Derlin, Denise</td></tr>
<tr class='TeeTimePast'><td>10:45 AM</td><td>1</td><td>Manav, Peterson</td><td>Rikki, Gilliam</td><td>Suhail, Quintero</td><td>Cosenzo, Chris</td></tr>
<tr class='TeeTimePast'><td>10:54 AM</td><td>1</td><td>Kira, Zhang</td><td>Darryl, Moody</td><td>Mildred, Schmitt</td><td>Mason, Muriel</td></tr>
<tr class='TeeTimePast'><td>11:03 AM</td><td>1</td><td>Jaeden, Sandoval (9 Holes)</td><td>Maureen, Hulme</td><td></td><td></td></tr>
<tr class='TeeTimePast'><td>11:12 AM</td><td>1</td><td>Ritchie, Williams</td><td>Eileen, Guerrero</td><td>Wright, Mark</td><td></td></tr>
<tr class='TeeTimePast'><td>11:21 AM</td><td>1</td><td>Club EG</td><td>Club EG</td><td>Club EG</td><td></td></tr>
<tr class='TeeTimePast'><td>11:30 AM</td><td>1</td><td>Johanna, Martin</td><td>Kelly, Durham</td><td>Rizwan, Whyte</td><td>Burkitt, Phil</td></tr>
<tr class='TeeTimePast'><td>11:39 AM</td><td>1</td><td>Menachem, Wolfe</td><td>Aniyah, Barrett</td><td>Ernie, Kim</td><td>McKay, Martin</td></tr>
<tr class='TeeTimePast'><td>11:48 AM</td><td>1</td><td>Danyal, Mclaughlin</td><td>Elisabeth, Compton</td><td>Kristin, Ross</td><td></td></tr>
<tr class='TeeTimePast'><td>11:57 AM</td><td>1</td><td>Fred, Fitzgerald</td><td>Milosz, Correa</td><td>Cherry, Nixon</td><td></td></tr>
<tr class='TeeTimePast'><td>12:06 PM</td><td>1</td><td>Umer, Barnett</td><td>Zena, Jacobs</td><td>Lennie, Chen</td><td>Coyle, Gordon</td></tr>
<tr class='TeeTimePast'><td>12:15 PM</td><td>1</td><td>Trystan, Preece</td><td>Manav, Peterson</td><td>Lukasz, Sykes</td><td></td></tr>
<tr class='TeeTimePast'><td>12:24 PM</td><td>1</td><td>Mel, Cunningham</td><td>Kira, Zhang</td><td>Selena, Smyth</td><td></td></tr>
<tr class='TeeTimePast'><td>12:33 PM</td><td>1</td><td>Aysha, Rosas</td><td>Jaeden, Sandoval</td><td>Connor, Walters</td><td>Stone, Eddie</td></tr>
<tr class='TeeTimePast'><td>12:42 PM</td><td>1</td><td>Emily-Jane, Rice</td><td>Ritchie, Williams</td><td>Eileen, Hough</td><td>Barnes, Chris</td></tr>
<tr class='TeeTimePast'><td>12:51 PM</td><td>1</td><td>Logan (OCGS)</td><td>Logan (OCGS)</td><td>Logan (OCGS), Hua Lee</td><td>Logan (OCGS)</td></tr>
<tr class='TeeTimePast'><td>1:00 PM</td><td>1</td><td>Aj, Hall</td><td>Johanna, Martin</td><td>Sam, Dotson</td><td>Adrian, Larsen</td></tr>
<tr class='TeeTimeNext'><td>1:09 PM</td><td>1</td><td>Andreas, Barker</td><td>Menachem, Wolfe</td><td>Mark, Harvey</td><td>Abigail, Farley</td></tr>
</tbody>
</table>
</div>
</div>
<div class='row'>
<div class='column right-col'>
<table class='listtable'>
<thead><tr><th>Time</th><th>Tee</th><th>Player 1</th><th>Player 2</th><th>Player 3</th><th>Player 4</th></tr></thead>
<tbody>
<tr class='TeeTimeFuture'><td>1:18 PM</td><td>1</td><td>Beverly, Cervantes</td><td>Danyal, Mclaughlin</td><td>Benedict, Munro</td><td>Lacey, Rigby</td></tr>
<tr class='TeeTimeFuture'><td>1:27 PM</td><td>1</td><td>Keagan, Miranda</td><td>Fred, Fitzgerald</td><td>Lacie, Turner</td><td>Selena, Smyth</td></tr>
<tr class='TeeTimeFuture'><td>1:36 PM</td><td>1</td><td>Dante, Wise</td><td>Umer, Barnett</td><td>Addison, Mcknight</td><td>Connor, Walters</td></tr>
<tr class='TeeTimeFuture'><td>1:45 PM</td><td>1</td><td>Chanelle, Maguire</td><td>Trystan, Preece</td><td>HoneyPot</td><td></td></tr>
<tr class='TeeTimeFuture'><td>1:54 PM</td><td>1</td><td>Rodrigo, Shea</td><td>Mel, Cunningham</td><td>HoneyPot</td><td></td></tr>
<tr class='TeeTimeFuture'><td>2:03 PM</td><td>1</td><td>Elizabeth, Snyder</td><td>Aysha, Rosas</td><td>Hamilton, Reid</td><td>Casey, Todd</td></tr>
<tr class='TeeTimeFuture'><td>2:12 PM</td><td>1</td><td>Sarah-Jayne, Wilson</td><td>Emily-Jane, Rice</td><td>Valiquette, Marina</td><td>Orleans, Stephen</td></tr>
<tr class='TeeTimeFuture'><td>2:21 PM</td><td>1</td><td>Matilda, Greene</td><td>Phil, Quinn</td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>2:30 PM</td><td>1</td><td>Darlene, Tucker</td><td>Abigail, Farley</td><td>HoneyPot</td><td></td></tr>
<tr class='TeeTimeFuture'><td>2:39 PM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>2:48 PM</td><td>1</td><td>Josie, Suarez</td><td>Kira, Zhang</td><td>Elisabeth, Compton</td><td>Chanelle, Maguire</td></tr>
<tr class='TeeTimeFuture'><td>2:57 PM</td><td>1</td><td>Adrian, Larsen</td><td>Jaeden, Sandoval</td><td>Milosz, Correa (9)</td><td>Rodrigo, Shea (9)</td></tr>
<tr class='TeeTimeFuture'><td>3:06 PM</td><td>1</td><td>Abigail, Farley</td><td>Ritchie, Williams</td><td>Zena, Jacobs</td><td>Snyder, Elizabeth</td></tr>
<tr class='TeeTimeFuture'><td>3:15 PM</td><td>1</td><td>Lacey, Rigby (9)</td><td>Mahi, Wharton (9)</td><td>Manav, Peterson (9)</td><td>Sarah-Jayne, Wilson</td></tr>
<tr class='TeeTimeFuture'><td>3:24 PM</td><td>1</td><td>Selena, Smyth</td><td>Johanna, Martin</td><td>Kira, Zhang</td><td>Matilda, Greene</td></tr>
<tr class='TeeTimeFuture'><td>3:33 PM</td><td>1</td><td>Connor, Walters</td><td>Menachem, Wolfe</td><td>Jaeden, Sandoval</td><td>Darlene, Tucker</td></tr>
<tr class='TeeTimeFuture'><td>3:42 PM</td><td>1</td><td>Mini Ottawa</td><td>Mini Ottawa</td><td>Mini Ottawa</td><td>Irfan, Thatcher</td></tr>
<tr class='TeeTimeFuture'><td>3:51 PM</td><td>1</td><td>Terry, Lewis</td><td>Fred, Fitzgerald</td><td>Mahi, Wharton</td><td></td></tr>
<tr class='TeeTimeFuture'><td>4:00 PM</td><td>1</td><td>Halimah, Farmer</td><td>Umer, Barnett</td><td>Johanna, Martin</td><td>Gladys, Sampson</td></tr>
<tr class='TeeTimeFuture'><td>4:09 PM</td><td>1</td><td>Sally, Coates</td><td>Trystan, Preece</td><td>Menachem, Wolfe</td><td>Briony, Walter</td></tr>
<tr class='TeeTimeFuture'><td>4:18 PM</td><td>1</td><td>Raja, Wilks (9)</td><td>Mel, Cunningham (9)</td><td>Danyal, Mclaughlin (9)</td><td>Padraig, Colley</td></tr>
<tr class='TeeTimeFuture'><td>4:27 PM</td><td>1</td><td>Israr, Glenn</td><td>Aysha, Rosas</td><td>Fred, Fitzgerald</td><td>Shivani, Cooper</td></tr>
<tr class='TeeTimeFuture'><td>4:36 PM</td><td>1</td><td>Ffion, Whitmore</td><td>Emily-Jane, Rice</td><td>Umer, Barnett (9)</td><td>Suhail, Quintero (9)</td></tr>
<tr class='TeeTimeFuture'><td>4:45 PM</td><td>1</td><td>Allegra, Shields</td><td>Phil, Quinn</td><td>Trystan, Preece</td><td>Mildred, Schmitt</td></tr>
<tr class='TeeTimeFuture'><td>4:54 PM</td><td>1</td><td>Patricia, Goddard</td><td>Aj, Hall</td><td></td><td>Jagoda, Pugh</td></tr>
<tr class='TeeTimeFuture'><td>5:03 PM</td><td>1</td><td>Lizzie, Walmsley</td><td>Andreas, Barker</td><td>Connor, Walters</td><td></td></tr>
<tr class='TeeTimeFuture'><td>5:12 PM</td><td>1</td><td>Marwan, Kramer</td><td>Beverly, Cervantes</td><td>Eileen, Hough</td><td></td></tr>
<tr class='TeeTimeFuture'><td>5:21 PM</td><td>1</td><td>Magnan, Andrew</td><td>Keagan, Miranda</td><td>Terry, Lewis</td><td></td></tr>
<tr class='TeeTimeFuture'><td>5:30 PM</td><td>1</td><td>Jones, Carter</td><td>Dante, Wise</td><td>Halimah, Farmer</td><td>Jones, Steve</td></tr>
<tr class='TeeTimeFuture'><td>5:39 PM</td><td>1</td><td>Carter, Tammy</td><td>Chanelle, Maguire</td><td>Sally, Coates</td><td>Carter, Aiden</td></tr>
<tr class='TeeTimeFuture'><td>5:48 PM</td><td>1</td><td>Lynch, Phil</td><td>Rodrigo, Shea</td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>5:57 PM</td><td>1</td><td>Carter, Jared</td><td>Snyder, Elizabeth</td><td>Coyle, Adam</td><td></td></tr>
<tr class='TeeTimeFuture'><td>6:06 PM</td><td>1</td><td>Lukasz, Sykes</td><td>Kadie, Brett</td><td>Lizzie, Walmsley</td><td>Auger, Paul</td></tr>
<tr class='TeeTimeFuture'><td>6:15 PM</td><td>1</td><td>Lana, Milne</td><td>Bradley, Donnelly</td><td>Marwan, Kramer</td><td>McCormack, Phil</td></tr>
<tr class='TeeTimeFuture'><td>6:24 PM</td><td>1</td><td>Eddie, Dean</td><td>Lilith, Daly</td><td>Gladys, Sampson</td><td></td></tr>
<tr class='TeeTimeFuture'><td>6:33 PM</td><td>1</td><td>Elaine, Parker</td><td>Kiefer, Clifford</td><td>Briony, Walter</td><td>Thrasher, Kerry</td></tr>
<tr class='TeeTimeFuture'><td>6:42 PM</td><td>1</td><td>Allegra, Mccoy (9)</td><td>Pollyanna, Sweet (9)</td><td>Padraig, Colley (9)</td><td>Shields, Marylyn (9)</td></tr>
<tr class='TeeTimeFuture'><td>6:51 PM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>7:00 PM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>7:09 PM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
<tr class='TeeTimeFuture'><td>7:18 PM</td><td>1</td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Related
HTML scaling table with resolution
I have a html table on my web page. It fits and looks really well on 1920x1080 but when the resolution gets changed to a smaller one or the window gets resized, then the table doesn't fit in the screen any more. I searched and tried like everything and could not fix it so I have to ask here.
Table in html:
<table class="table" id="table">
<tr id="table_headers">
<th >Id</th>
<th>Category</th>
<th>Service Date</th>
<th>Contract Date</th>
<th>Locations</th>
<th>Rate</th>
<!-- <th>Hourly Rate</th>
<th>Turn Rate</th>
<th>Flight Rate</th> -->
<th>Contract Expiration</th>
<th>Past Due Penalty</th>
<th>Billing Address</th>
<th>Billing Email</th>
<th>Name</th>
<th>Phone</th>
<th>Account Number</th>
<th>Signed</th>
<th>PDF</th>
<th class="custom">View</th>
<th class="custom">Download</th>
<th class="custom">Edit</th>
<th class="custom">Delete</th>
</tr>
<?php
$q = $db->prepare("select * from pdfs");
$q->execute();
$res = $q->fetchAll();
foreach($res as $result)
{
echo '<tr id="row'.$result['id'].'">
<td>'.$result['id'].'</td>
<td class="category_tbl_td">'.$result['category'].'</td>
<td>'.$result['date_serviced'].'</td>
<td>'.$result['contract_date'].'</td>
<td>'.$result['locations'].'</td>
<td>'.$result['rate'].'</td>
<td>'.$result['contract_expiry'].'</td>
<td>'.$result['past_due_penalty'].'</td>
<td>'.$result['billing_mail_address'].'</td>
<td>'.$result['billing_email_address'].'</td>
<td>'.$result['billing_name'].'</td>
<td>'.$result['billing_phone'].'</td>
<td>'.$result['AccountNumber'].'</td>
<td>'.$result['Signed'].'</td>
<td>'.$result['pdf_location'].'</td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-info">
<a href="edit.php" >
<span class="glyphicon glyphicon-pencil"></span>
</button></td>
<td><b>×</b></td>
</tr>';
}
Table in css:
table,tr,th,td{
color:white;
border: 1px solid #080808;
border-collapse:collapse;
text-align: center;
font-size: 16px;
margin-left: -27%;
margin-top: 1%;
text-align: center;
table-layout: auto;
min-width: 50%;
font-family: Arial;
background:linear-gradient(top, #3c3c3c 0%, #222222 100%);
background:-webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
}
I thought adding % instead of px would fix it but it doesn`t. The whole website works just fine, but the table causes issues.
Any ideas what might be the reason for that and how to fix it?
This is how table looks with full hd:
This is how it looks on any lower resolution:
For responsive websites give width in terms of percentage rather than pixels
.class_name
{
width:50%
}
To some screen size you can use this
.table { width: 100%; }
On mobile deviсes you must try someting more complicated. Adding JS Plugin
This fore excample
https://github.com/filamentgroup/tablesaw
Or use css tricks like this
https://css-tricks.com/responsive-data-tables/
Fixed search box and table header, scrolling body
I have the following code for an address book. I'd like to have the search box and table header fixed allowing the table body to scroll up (or behind). I've tried several different CSS coding techniques without success. Can anyone point me to a CSS-only solution? The HTML/CSS code follows.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
th {
border: 1px solid #dddddd;
font-size: x-large;
text-align: left;
padding: 8px;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #ccffff;
}
</style>
</head>
<body>
<h1>Directory</h1>
<!-- <p>Search</p> -->
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Number</th>
<th>Street</th>
<th>Phone</th>
<th>Mobile</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>James</td>
<td>Smith</td>
<td>163</td>
<td>Canal Lane</td>
<td>N/A</td>
<td>916-806-9999</td>
<td>jim#gmail.com</td>
</tr>
<tr>
<td>Jacquelyn</td>
<td>Abel</td>
<td>4551</td>
<td>Paso Lane</td>
<td>999-999-9208</td>
<td>999-999-3835</td>
<td>he51#comcast.net</td>
</tr>
<tr>
<td>Deborah Kay</td>
<td>Affal</td>
<td>335</td>
<td>Suez Lane</td>
<td>555-555-4897</td>
<td>555-555-3773</td>
<td>debb#hotmail.com</td>
</tr>
<tr>
<td>Emily</td>
<td>Aguate</td>
<td>3943</td>
<td>River Lane</td>
<td>444-444-2951</td>
<td>444-444-0514</td>
<td>erag#hotmail.com</td>
</tr>
<tr>
<td>Anthony (Tony)</td>
<td>Alba</td>
<td>4449</td>
<td>Red Lane</td>
<td>N/A</td>
<td>777-777-7778</td>
<td>tony35#yahoo.com</td>
</tr>
<tr>
<td>Amador</td>
<td>Alcan</td>
<td>14</td>
<td>Izmal Place</td>
<td>222-222-2002</td>
<td>333-333-3418</td>
<td>abab#7lakes.com</td>
</tr>
<tr>
<td>Ofelia</td>
<td>Alcan</td>
<td>14</td>
<td>Izmal Place</td>
<td>234-234-2002</td>
<td>234-234-7151</td>
<td>ofof#7lakes.com</td>
</tr>
<tr>
<td>Sherry</td>
<td>Allala</td>
<td>3910</td>
<td>Euboea Lane</td>
<td>5657-567-9331</td>
<td>567-567-9427</td>
<td>sherr11#att.net</td>
</tr>
<tr>
<td>Lori</td>
<td>Anders</td>
<td>3905</td>
<td>ADel Paso Lane</td>
<td>N/A</td>
<td>789-789-4784</td>
<td>mags3#yahoo.com</td>
</tr>
<tr>
<td>Peggy</td>
<td>Angert</td>
<td>3924</td>
<td>Pozzlo Lane</td>
<td>N/A</td>
<td>321-321-3494</td>
<td>peggy00#yahoo.com</td>
</tr>
<tr>
<td>Peter</td>
<td>Angty</td>
<td>3924</td>
<td>Pozzaler Lane</td>
<td>N/A</td>
<td>678-678-3003</td>
<td>peter5657#hotmail.com</td>
</tr>
<tr>
<td>Caryne</td>
<td>Angler</td>
<td>4436</td>
<td>Sea Lane</td>
<td>N/A</td>
<td>987-987-6605</td>
<td>N/A</td>
</tr>
<tr>
<td>Neata</td>
<td>Anton</td>
<td>3973</td>
<td>Don Lane</td>
<td>456-456-8711</td>
<td>456-456-4744</td>
<td>nea456t#sbcglobal.net</td>
</tr>
</tbody>
</table>
Put the table's head and the search box in a separate div and set it's position attribute to fixed.
// I'm assuming that you've assigned the div a class called
// .th_div
.th_div { position: fixed; }
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
How to add Focus to a table row <tr>?
I have a table generated with AngularJS.
Here's my HTML:
<table class="my_table">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Celphone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.Name}}</td>
<td>{{contact.Address}}</td>
<td>{{contact.Celphone}}</td>
</tr>
</tbody>
</table>
I want each row to change color when "hover" and a different color when "clicked", so I tried this with CSS:
<style>
.my_table tbody tr:hover {
background-color: #7fccee; /*--- this is a blue color when hover ---*/
}
.my_table tbody tr:focus {
background-color: #f3f3f3; /*--- this is a gray color when clicked---*/
}
</style>
The hover works perfectly, but the Focus is not working! (The weird thing is that in the browser console, if I select the row and "force element state :focus" then it applies the focus to the row)
I also tried using a SCRIPT with jquery:
$(document).ready(function() {
$('.my_table tbody tr').click(function() {
$(this).addClass('active'); //I'm adding the color gray with css to '.active'
});
});
But this won't work too, what am I doing wrong?
The :focus pseudo class only works with form elements such as <input>, <button> etc. You can add it to a non-form element like <tr> by adding tabindex, e.g.:
<tr tabindex="0">
Then apply the CSS as normal.
.my_table tbody tr:hover {
background-color: blue;
}
.my_table tbody tr:focus {
background-color: red;
outline: 0; /*remove outline*/
}
<table class="my_table" border>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Celphone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts" tabindex="0">
<td>{{contact.Name}}</td>
<td>{{contact.Address}}</td>
<td>{{contact.Celphone}}</td>
</tr>
</tbody>
</table>
I would use the directive:
app.directive('ngFocusClass', function () {
return ({
restrict: 'A',
link: function(scope, element) {
element.focus(function () {
element.addClass('focus');
});
element.blur(function () {
element.removeClass('focus');
});
}
});
});
Changes color of 1st three rows only Data Tables
I am using datatables to sow data and i want to make different colors for top 3 rows 1st should be green 2nd blue and third row color should be red
My table structure is as
<script>
$(document).ready(function() {
$(document).ready(function() {
$('#project').DataTable({
"columnDefs": [
{ "orderable": false, "targets": [0,6,7] }
]
});
});
});
</script>
<table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="project" class="color">
<thead>
<tr role="row">
<th style="display:none"></th>
<th>Sr</th>
<th>Reg #</th>
<th>Name</th>
</tr>
</thead>
<tbody>
#foreach($results as $index => $result)
<tr>
<td style="display:none"></td>
<td>{{ $index+1 }}</td>
<td class="sorting_1"> {{ $result->reg_no }} </td>
<td>{{ $result->first_name }}</td>
</tr>
#endforeach
</tbody>
</table>
I tried to give style to first row as
.color td {
background-color : green;
}
But not working please help to solve it
Thanks
All modern browsers support CSS nth-child selectors. Backgroundcolours can be applied to the whole rows as such:
tbody>tr:nth-child(1) { /* etc */
background-color: green;
}
Not all properties can be applied to rows. Sometimes you will need to apply them to the cells inside:
tbody>tr:nth-child(1) td { /* or th */
background-color: green;
}
If you are desperate, you can apply classes, but that is not the best possible solution. Classes should only be used to distinguish between elements which don’t follow a pattern.
You can use the nth-child selectors to achieve what you are trying to do. You can also learn about it here https://css-tricks.com/almanac/selectors/n/nth-child/
Try something like this:
tr:nth-child(1) {
background-color: green;
}
tr:nth-child(2) {
background-color: blue;
}
tr:nth-child(3) {
background-color: red;
}
tr:nth-child(1):hover, tr:nth-child(2):hover, tr:nth-child(3):hover {
/*
Give whatever effect you want
*/
}
AngularJS bootstrap class
I have the following angularjs ng-repeat ,column status have three values (Phoned,Active,Waiting)
<tr ng-repeat="person in persons">
<td>{{person.id}}</td>
<td>{{person.status}}</td>
</tr>
I need to apply bootstrap class depending on the value of status,like the following image
You need to use ng-class directive
Markup
<tr ng-repeat="person in persons">
<td>{{person.id}}</td>
<td ng-class="{'phoned':person.status === 'Phoned',
'active':person.status === 'Active',
'waiting':person.status === 'Waiting'}">
{{person.status}}
</td>
</tr>
CSS
.phoned{
background-color: blue;
}
.active{
background-color: green;
}
.waiting{
background-color: orange;
}