I have two tables, designed to be presented side by side unless the device is (yet to be defined "too small"). For the table that appears on the right, we would prefer that the message column be word-wrapped rather than causing the table width to overflow maximum. But word wrap is not taking place.
Here is the HTML with obfuscated data:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active chats</title>
<meta charset="utf-8">
<style>
body {
background-image: 'url("bg-standard.jpg")';
background-attachment: fixed;
}
.twoTables {
margin-left:-5px;
margin-right:-5px;
}
.tableLeft {
float:left ;
padding: 5px ;
}
.tableRight {
float:left ;
padding: 5px ;
}
.twoTables::after {
content: "";
clear: both;
display: table;
}
headingLink {
color: white; text-decoration: none ;
}
.dummyRow {
line-height: 1px;
visibility: hidden;
}
.freeze-table {
border-spacing: 0;
border-collapse: collapse;
padding: 0;
}
thead th {
top: 0;
position: sticky;
background-color: #666 ;
color: #fff ;
z-index: 20 ;
min-height: 30px ;
height: 30px ;
text-align: left ;
}
tr:nth-child(even) {
background-color: #f2f2f2 ;
}
xth, xtd {
padding: 0 5px;
border-collapse: collapse;
font-size: 100% ;
outline: 1px solid #ccc ;
border: none ;
outline-offset: -1px ;
padding-left: 5px ;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
th, td {
padding: 0 0px;
border-collapse: collapse;
font-size: 100% ;
border: none ;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 5px;
}
tr {
min-height: 25px ;
height: 25px ;
background-color: #ffffff
}
pageElement {
display:flex; flex-wrap: nowrap; align-items: center
}
a:link {
color: white ;
text-decoration: none ;
}
* { padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
.imgbox {
display: grid;
width: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
@media screen and (max-width: 100px) {
.tableLeft {
}
.tableRight {
}
}
</style>
</head>
<body><form method = 'POST' action = /YouTube/latestChatsObfuscate.php >
<table style='border-collapse:collapse;'>
<tr>
<td><input type = 'checkbox' name='highlightMsg' id='highlightMsg' checked >
<label for='highlightMsg'>Highlight messages</label></td>
<td><input type = 'checkbox' name = 'msgUseRegEx' id = 'msgUseRegEx' checked >
<label for='msgUseRegEx'>Use REGEX</label></td>
<td>Message filter</td>
<td><input type = 'text' name = 'msgFilter' value='[@#]*request' size=30 ></td>
</tr>
<tr>
<td><input type='checkbox' name='invertOrder' id='invertOrder' checked >
<label for='invertOrder'>Latest first</label></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan=4><input type = 'text' name = 'embedHTML' value='<iframe width"325" height"263" src="https://www.youtube.com/embed/-unZO__WJuo?autoplay=1&livemonitor=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>' size=255></td>
</tr>
<tr>
<td>
<input type='radio' name='emoteMgmt' value='text'> Emoticons as text
<input type='radio' name='emoteMgmt' checked value='icon'> Emoticons as image
<input type='radio' name='emoteMgmt' value='strip'> Strip emoticons
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<input type='submit' name='submit' value='Submit'>
<input type='submit' name=backToYouTubeStuff value='Go Back'>
<input type='submit' name=buttonCheckLivestream value='Check for new'>
<br>
</form>
<br><script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class='twoTables'>
<div class='tableLeft'>
<canvas id="concurrentChart" height=150></canvas>
<div id='watchers'><table>
<tr>
<th colspan=2>Watcher</th><th>Joined</th><th>Latest</th>
</tr><tr><td style='text-align:right;'>27</td><td>(<span style="font-weight:bold; font-style:italic;">Cgvr</span>) <span>PgznYkwoq ZxpSbi...</span></td><td>07:32</td><td style='text-align:right;'>2.7m</td></tr>
<tr><td style='text-align:right;'>26</td><td><span>Gq. L-XHl</span></td><td>07:32</td><td style='text-align:right;'>0.0m</td></tr>
<tr><td style='text-align:right;'>25</td><td><span>Jqzhgcr 2sgguj</span></td><td>07:31</td><td style='text-align:right;'>4.2m</td></tr>
<tr><td style='text-align:right;'>24</td><td><span>DosdedrWnlhsDnvxk</span></td><td>07:31</td><td style='text-align:right;'>3.4m</td></tr>
<tr><td style='text-align:right;'>23</td><td><span>zqbqzxv</span></td><td>07:31</td><td style='text-align:right;'>4.7m</td></tr>
<tr><td style='text-align:right;'>22</td><td><span>Wdlsf Oyxf</span></td><td>07:27</td><td style='text-align:right;'>3.6m</td></tr>
<tr><td style='text-align:right;'>21</td><td><span>MyxCTC</span></td><td>07:25</td><td style='text-align:right;'>10.9m</td></tr>
<tr><td style='text-align:right;'>20</td><td><span>fugpb rvyikqz</span></td><td>07:24</td><td style='text-align:right;'>11.4m</td></tr>
<tr><td style='text-align:right;'>19</td><td><span>Lkwsr Gbhivlm</span></td><td>07:20</td><td style='text-align:right;'>15.6m</td></tr>
<tr><td style='text-align:right;'>18</td><td><span>Maymc Xppnjx</span></td><td>07:20</td><td style='text-align:right;'>3.2m</td></tr>
</table></div><div id='player'><iframe width="325" height="263" src="https://www.youtube.com/embed/-unZO__WJuo?autoplay=1&livemonitor=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><div id='chats' class='tableRight'><table style='table-layout: fixed; wwidth:100%; border-collapse:collapse;border:0px solid white;'>
<tr style='color:white; border:0px;'>
<th colspan=3 style='text-align:center;background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;'>2023-09-17</th>
<td style='background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;word-wrap:break-word;'><a href='https://youtu.be/-unZO__WJuo'>2023-09-17 Sunday Sunrise Atlanta timeline (23-080) <span style="background-color:lightblue;color:black;font-size:100%;font-weight:bold;"> (16 max) </span></a></td>
</tr>
<tr>
<td style='text-align:right;color:Blue;'>1</td>
<td style='text-align:center;color:Blue;'>07:36</td>
<td style='text-align:left;color:Blue;'>Sq. O-CGq</td>
<td style='text-align:left;color:Blue;'>Q tqgli kl dpsk wf</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>2</td>
<td style='text-align:center;color:Blue;'>07:35</td>
<td style='text-align:left;color:Blue;'>Rut Zzgylkc Fwablpc</td>
<td style='text-align:left;color:Blue;'><span style='background-color:red; color:black;'>@icawcwb</span> Tkomo zyy’xj lwbfll lgmkyrqsj njlbtrlattzc Xrjpnt.</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>3</td>
<td style='text-align:center;color:Blue;'>07:35</td>
<td style='text-align:left;color:Blue;'>Wngyjf Cnaqh</td>
<td style='text-align:left;color:Blue;'>Psakgo, asy Ptpka, Rqfhs dzq Rojgz nhznfus?</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>4</td>
<td style='text-align:center;color:Blue;'>07:35</td>
<td style='text-align:left;color:Blue;'>If. Uqy Wwr</td>
<td style='text-align:left;color:Blue;'>umu @Hxp Aynrlsy Jlceuud</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>5</td>
<td style='text-align:center;color:Blue;'>07:35</td>
<td style='text-align:left;color:Blue;'>HrbZ Zzdyozr t Gheiur</td>
<td style='text-align:left;color:Blue;'>Vfxsp Xgafft 😂😂😂</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>6</td>
<td style='text-align:center;color:Blue;'>07:35</td>
<td style='text-align:left;color:Blue;'>Xrg Qliuboc Eeizcsd</td>
<td style='text-align:left;color:Blue;'><span style='background-color:red; color:black;'>@jhfifrc</span> Qoc Sndbt Zu Ukliqyv</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>7</td>
<td style='text-align:center;color:Blue;'>07:34</td>
<td style='text-align:left;color:Blue;'>UzhZ Ocvlprn w Ilxzpl</td>
<td style='text-align:left;color:Blue;'>En’ua kff fjriiegpk ru ybkzfgu 😀</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>8</td>
<td style='text-align:center;color:Blue;'>07:34</td>
<td style='text-align:left;color:Blue;'>Utfpzh Wrjhp</td>
<td style='text-align:left;color:Blue;'>Owba afybdfn 🌞 Bieka 🌻</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>9</td>
<td style='text-align:center;color:Blue;'>07:33</td>
<td style='text-align:left;color:Blue;'>himtrovt</td>
<td style='text-align:left;color:Blue;'><span style='background-color:red; color:black;'>#tuyhhsx</span> dqtfzjof tnpch</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>10</td>
<td style='text-align:center;color:Blue;'>07:33</td>
<td style='text-align:left;color:Blue;'>Im. Xmm Lhr</td>
<td style='text-align:left;color:Blue;'>Go ykroitp @Qmczw Slrl</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>11</td>
<td style='text-align:center;color:Blue;'>07:33</td>
<td style='text-align:left;color:Blue;'>Mtfpzn Zqkmk</td>
<td style='text-align:left;color:Blue;'>Wfdrq dc pjkj gm pli aktrvc pld voba Osvg ukb. 😂</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>11</td>
<td style='text-align:center;color:Blue;'>07:33</td>
<td style='text-align:left;color:Blue;'>IdbtJvybq WlxQykMmokdt</td>
<td style='text-align:left;color:Blue;'><span style='background-color:red; color:black;'>@cmhuhbu</span> - Igdij ywuvtsh qn vynj pn 25%!</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>13</td>
<td style='text-align:center;color:Blue;'>07:33</td>
<td style='text-align:left;color:Blue;'>Eble Beymuo XCR</td>
<td style='text-align:left;color:Blue;'>Dwob gfzvbpg Onlgk</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>14</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Jgdtq Lalthr</td>
<td style='text-align:left;color:Blue;'>Gyft Mwbaxkr @Nwzvfm Nzkz @AlzkGjana ZriCmoJywzxv</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>15</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Nnza Jancqg BWW</td>
<td style='text-align:left;color:Blue;'>Wasp zdrwvrw Pe I DLm</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>16</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>AkrfafkWnpqfRwacp</td>
<td style='text-align:left;color:Blue;'>scjle</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>17</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>BckX Ligqncz y Rjccsy</td>
<td style='text-align:left;color:Blue;'>Yjezxpo fqe Fbea 😀</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>18</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>BjavlsfLuxkdLincj</td>
<td style='text-align:left;color:Blue;'>lva’c ccxk</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>19</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Jcpod Zwlw</td>
<td style='text-align:left;color:Blue;'>Sjhkrxk wyyoycrd</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>20</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>TkhbWmmgs GlsLtsQtsckc</td>
<td style='text-align:left;color:Blue;'><span style='background-color:red; color:black;'>@nzmqtrk</span> - B iwm'k aur ggen hrcgg jdwryus qcbpdu!</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>21</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Pn. Rlb Tey</td>
<td style='text-align:left;color:Blue;'>Byhbs @Lnspvfru 2ijejb</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>22</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>BqcdrvlYrlslOxrdj</td>
<td style='text-align:left;color:Blue;'>gojcgvw</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>23</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Sa. V-EMm</td>
<td style='text-align:left;color:Blue;'>Law abg isqvtjase xkse</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>23</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Ogkg Mosqnm WRY</td>
<td style='text-align:left;color:Blue;'>X uqh dn Fdyazq Tffpw</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>25</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Kse Miafmzt Lwkgytj</td>
<td style='text-align:left;color:Blue;'>@Ukgn Myptyl WTR J ugka oibnu nj bpncs ibh gkxsrtpky.</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>26</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Nxvi Vuhkor65</td>
<td style='text-align:left;color:Blue;'>Gyrgid Pgsata. Juema vl fbjl mw fwyo mvp dm mqyh v aoraz nhdh.</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>27</td>
<td style='text-align:center;color:Blue;'>07:31</td>
<td style='text-align:left;color:Blue;'>AtuK Ejowvma m Mpzkua</td>
<td style='text-align:left;color:Blue;'>Pxgbwqvmzixhvfh 😀</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>28</td>
<td style='text-align:center;color:Blue;'>07:31</td>
<td style='text-align:left;color:Blue;'>Jydrimd 2wegxj</td>
<td style='text-align:left;color:Blue;'>Qzvj xssvokx pnuai fzhrlyble</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>29</td>
<td style='text-align:center;color:Blue;'>07:31</td>
<td style='text-align:left;color:Blue;'>Wjvncc Dktha</td>
<td style='text-align:left;color:Blue;'>Rusf haqpqbd 🌞 Mqclon 🌅 Wii lsz lym qau cltthbvc fbefuyc?</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>30</td>
<td style='text-align:center;color:Blue;'>07:31</td>
<td style='text-align:left;color:Blue;'>Btfl Ylyiyc SFC</td>
<td style='text-align:left;color:Blue;'>Mqxk xeqmvno Nwurfehhhshsxjhsz</td>
</tr>
<tr><th colspan=4 style='background-color: #666 ;color: #fff ;z-index: 20 ;min-height: 30px ;height: 30px ;text-align: left ;'>End of data.</th></tr></table></div></div><script>
const ctx = document.getElementById('concurrentChart') ;
new Chart(ctx
, { type: 'line'
, data: {
labels: ["07:08","07:09","07:10","07:11","07:12","07:13","07:14","07:15","07:16","07:17","07:18","07:19","07:20","07:21","07:22","07:23","07:24","07:25","07:26","07:27","07:28","07:29","07:30","07:31","07:32","07:33","07:34","07:35"]
, datasets: [{
label: 'Concurrent Chat Viewers'
, data: [0,8,8,9,6,8,8,3,5,7,4,4,1,3,8,8,6,6,4,7,11,16,14,9,7,9,6,9]
, fill:false
, borderColor: 'rgb(75, 192, 192)'
, tension: 0.1
, spanGaps:true
}]
}
});
</script></body></html>
(When a device size has been defined, it is expacted that only the line "@media screen and (max-width: 100px) {" will need to be modified.)
Now this data happens to appear just like we want on a large computer screen, but on a 12.9" iPad the second table (with the long messages) appears below everything else. And we'd like this to work side-by-side under most conditions on a phone device. Even on a larger display, there seems to be no circumstance in which word wrapping will take place - instead, the table overflows the edge of the browser, continuing to the right.
Are we simply dealing with too much data, or is there some combination that will give us the desired side-by-side view?
We have tried applying all sorts of values (width='50%' for example) to the td, table, th attributes (individually and collectively), all to no benefit. We'd really like this to be dynamic, and not dependent upon some physical value (like width='100px' for some column), but the combination eludes us. I have searched Stack Overflow and google in general for help with this (it is from Word-wrap in an HTML table that the idea for fixed table width 100% and word-wrap came)... but again nothing seems to help out.
NOTE: I do understand that 'minimal code that reproduces the issuue' is ideal. I also, however, understand that many times when one component is changed, it can have a dramatic effect on the whole, and wnen enough information is not provided about the components, the solution to one part can break the other parts. (We've seen that in part in the first answer received.) So, this question contains parts that may seem irrelevant to the question, but it is critical that the solution work with them without breaking some other part.
Thanks
Based on what I understood here are the changes I suggest
The primary change I made was to use CSS Flexbox to control the layout of your two tables. Flexbox is a layout model in CSS that allows you to design complex layouts with ease, especially when dealing with elements that need to be aligned horizontally or vertically.
Here's a breakdown of the changes:
Using Flexbox for Container (twoTables):
.twoTables {
margin-left: -5px;
margin-right: -5px;
display: flex; /* Use flexbox to control layout */
}
display: flex; to the .twoTables container. This tells the container to become a flex container, and its children (in this case, the two tables) will become flex items.Adjusting the Tables (tableLeft and tableRight):
.tableLeft,
.tableRight {
padding: 5px;
flex: 1; /* Distribute available space evenly between tables */
min-width: 0;
}
float property from both tables (float: left;) because Flexbox handles alignment and layout differently.flex: 1; for both tables. This means that both tables will take up an equal amount of available space along the main axis. This ensures that they appear side by side and share the available horizontal space evenly.min-width: 0; to ensure that the tables can shrink if necessary. This is important because, without it, the tables might not shrink when the screen size is reduced.With these changes, the tables will be displayed side by side regardless of the screen size, and Flexbox will take care of the layout for you. It's a more modern and flexible approach to creating responsive layouts compared to using float for layout control.
Here is the complete Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active chats</title>
<meta charset="utf-8">
<style>
body {
background-image: 'url("bg-standard.jpg")';
background-attachment: fixed;
}
.twoTables {
margin-left: -5px;
margin-right: -5px;
display: flex; /* Use flexbox to display tables side by side */
}
.tableLeft,
.tableRight {
padding: 5px;
flex: 1; /* Distribute available space evenly between tables */
min-width: 0;
}
.twoTables::after {
content: "";
clear: both;
display: table;
}
headingLink {
color: white; text-decoration: none ;
}
.dummyRow {
line-height: 1px;
visibility: hidden;
}
.freeze-table {
border-spacing: 0;
border-collapse: collapse;
padding: 0;
}
thead th {
top: 0;
position: sticky;
background-color: #666 ;
color: #fff ;
z-index: 20 ;
min-height: 30px ;
height: 30px ;
text-align: left ;
}
tr:nth-child(even) {
background-color: #f2f2f2 ;
}
xth, xtd {
padding: 0 5px;
border-collapse: collapse;
font-size: 100% ;
outline: 1px solid #ccc ;
border: none ;
outline-offset: -1px ;
padding-left: 5px ;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
th, td {
padding: 0 0px;
border-collapse: collapse;
font-size: 100% ;
border: none ;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 5px;
}
tr {
min-height: 25px ;
height: 25px ;
background-color: #ffffff
}
pageElement {
display:flex; flex-wrap: nowrap; align-items: center
}
a:link {
color: white ;
text-decoration: none ;
}
* { padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
.imgbox {
display: grid;
width: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
@media screen and (max-width: 100px) {
.tableLeft {
}
.tableRight {
}
}
</style>
</head>
<body><form method = 'POST' action = /YouTube/latestChatsObfuscate.php >
<table style='border-collapse:collapse;'>
<tr>
<td><input type = 'checkbox' name='highlightMsg' id='highlightMsg' checked >
<label for='highlightMsg'>Highlight messages</label></td>
<td><input type = 'checkbox' name = 'msgUseRegEx' id = 'msgUseRegEx' checked >
<label for='msgUseRegEx'>Use REGEX</label></td>
<td>Message filter</td>
<td><input type = 'text' name = 'msgFilter' value='[@#]*request' size=30 ></td>
</tr>
<tr>
<td><input type='checkbox' name='invertOrder' id='invertOrder' checked >
<label for='invertOrder'>Latest first</label></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan=4><input type = 'text' name = 'embedHTML' value='<iframe width"325" height"263" src="https://www.youtube.com/embed/-unZO__WJuo?autoplay=1&livemonitor=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>' size=255></td>
</tr>
<tr>
<td>
<input type='radio' name='emoteMgmt' value='text'> Emoticons as text
<input type='radio' name='emoteMgmt' checked value='icon'> Emoticons as image
<input type='radio' name='emoteMgmt' value='strip'> Strip emoticons
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<input type='submit' name='submit' value='Submit'>
<input type='submit' name=backToYouTubeStuff value='Go Back'>
<input type='submit' name=buttonCheckLivestream value='Check for new'>
<br>
</form>
<br><script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class='twoTables'>
<div class='tableLeft'>
<canvas id="concurrentChart" height=150></canvas>
<div id='watchers'><table>
<tr>
<th colspan=2>Watcher</th><th>Joined</th><th>Latest</th>
</tr><tr><td style='text-align:right;'>27</td><td>(<span style="font-weight:bold; font-style:italic;">Cgvr</span>) <span>PgznYkwoq ZxpSbi...</span></td><td>07:32</td><td style='text-align:right;'>2.7m</td></tr>
<tr><td style='text-align:right;'>26</td><td><span>Gq. L-XHl</span></td><td>07:32</td><td style='text-align:right;'>0.0m</td></tr>
<tr><td style='text-align:right;'>25</td><td><span>Jqzhgcr 2sgguj</span></td><td>07:31</td><td style='text-align:right;'>4.2m</td></tr>
<tr><td style='text-align:right;'>24</td><td><span>DosdedrWnlhsDnvxk</span></td><td>07:31</td><td style='text-align:right;'>3.4m</td></tr>
<tr><td style='text-align:right;'>23</td><td><span>zqbqzxv</span></td><td>07:31</td><td style='text-align:right;'>4.7m</td></tr>
<tr><td style='text-align:right;'>22</td><td><span>Wdlsf Oyxf</span></td><td>07:27</td><td style='text-align:right;'>3.6m</td></tr>
<tr><td style='text-align:right;'>21</td><td><span>MyxCTC</span></td><td>07:25</td><td style='text-align:right;'>10.9m</td></tr>
<tr><td style='text-align:right;'>20</td><td><span>fugpb rvyikqz</span></td><td>07:24</td><td style='text-align:right;'>11.4m</td></tr>
<tr><td style='text-align:right;'>19</td><td><span>Lkwsr Gbhivlm</span></td><td>07:20</td><td style='text-align:right;'>15.6m</td></tr>
<tr><td style='text-align:right;'>18</td><td><span>Maymc Xppnjx</span></td><td>07:20</td><td style='text-align:right;'>3.2m</td></tr>
</table></div><div id='player'><iframe width="325" height="263" src="https://www.youtube.com/embed/-unZO__WJuo?autoplay=1&livemonitor=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><div id='chats' class='tableRight'><table style='table-layout: fixed; wwidth:100%; border-collapse:collapse;border:0px solid white;'>
<tr style='color:white; border:0px;'>
<th colspan=3 style='text-align:center;background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;'>2023-09-17</th>
<td style='background-color:darkblue;color:white;font-size:115%;font-weight:bold;border:solid white;word-wrap:break-word;'><a href='https://youtu.be/-unZO__WJuo'>2023-09-17 Sunday Sunrise Atlanta timeline (23-080) <span style="background-color:lightblue;color:black;font-size:100%;font-weight:bold;"> (16 max) </span></a></td>
</tr>
<tr>
<td style='text-align:right;color:Blue;'>1</td>
<td style='text-align:center;color:Blue;'>07:36</td>
<td style='text-align:left;color:Blue;'>Sq. O-CGq</td>
<td style='text-align:left;color:Blue;'>Q tqgli kl dpsk wf</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>2</td>
<td style='text-align:center;color:Blue;'>07:35</td>
<td style='text-align:left;color:Blue;'>Rut Zzgylkc Fwablpc</td>
<td style='text-align:left;color:Blue;'><span style='background-color:red; color:black;'>@icawcwb</span> Tkomo zyy’xj lwbfll lgmkyrqsj njlbtrlattzc Xrjpnt.</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>3</td>
<td style='text-align:center;color:Blue;'>07:35</td>
<td style='text-align:left;color:Blue;'>Wngyjf Cnaqh</td>
<td style='text-align:left;color:Blue;'>Psakgo, asy Ptpka, Rqfhs dzq Rojgz nhznfus?</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>4</td>
<td style='text-align:center;color:Blue;'>07:35</td>
<td style='text-align:left;color:Blue;'>If. Uqy Wwr</td>
<td style='text-align:left;color:Blue;'>umu @Hxp Aynrlsy Jlceuud</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>5</td>
<td style='text-align:center;color:Blue;'>07:35</td>
<td style='text-align:left;color:Blue;'>HrbZ Zzdyozr t Gheiur</td>
<td style='text-align:left;color:Blue;'>Vfxsp Xgafft 😂😂😂</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>6</td>
<td style='text-align:center;color:Blue;'>07:35</td>
<td style='text-align:left;color:Blue;'>Xrg Qliuboc Eeizcsd</td>
<td style='text-align:left;color:Blue;'><span style='background-color:red; color:black;'>@jhfifrc</span> Qoc Sndbt Zu Ukliqyv</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>7</td>
<td style='text-align:center;color:Blue;'>07:34</td>
<td style='text-align:left;color:Blue;'>UzhZ Ocvlprn w Ilxzpl</td>
<td style='text-align:left;color:Blue;'>En’ua kff fjriiegpk ru ybkzfgu 😀</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>8</td>
<td style='text-align:center;color:Blue;'>07:34</td>
<td style='text-align:left;color:Blue;'>Utfpzh Wrjhp</td>
<td style='text-align:left;color:Blue;'>Owba afybdfn 🌞 Bieka 🌻</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>9</td>
<td style='text-align:center;color:Blue;'>07:33</td>
<td style='text-align:left;color:Blue;'>himtrovt</td>
<td style='text-align:left;color:Blue;'><span style='background-color:red; color:black;'>#tuyhhsx</span> dqtfzjof tnpch</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>10</td>
<td style='text-align:center;color:Blue;'>07:33</td>
<td style='text-align:left;color:Blue;'>Im. Xmm Lhr</td>
<td style='text-align:left;color:Blue;'>Go ykroitp @Qmczw Slrl</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>11</td>
<td style='text-align:center;color:Blue;'>07:33</td>
<td style='text-align:left;color:Blue;'>Mtfpzn Zqkmk</td>
<td style='text-align:left;color:Blue;'>Wfdrq dc pjkj gm pli aktrvc pld voba Osvg ukb. 😂</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>11</td>
<td style='text-align:center;color:Blue;'>07:33</td>
<td style='text-align:left;color:Blue;'>IdbtJvybq WlxQykMmokdt</td>
<td style='text-align:left;color:Blue;'><span style='background-color:red; color:black;'>@cmhuhbu</span> - Igdij ywuvtsh qn vynj pn 25%!</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>13</td>
<td style='text-align:center;color:Blue;'>07:33</td>
<td style='text-align:left;color:Blue;'>Eble Beymuo XCR</td>
<td style='text-align:left;color:Blue;'>Dwob gfzvbpg Onlgk</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>14</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Jgdtq Lalthr</td>
<td style='text-align:left;color:Blue;'>Gyft Mwbaxkr @Nwzvfm Nzkz @AlzkGjana ZriCmoJywzxv</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>15</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Nnza Jancqg BWW</td>
<td style='text-align:left;color:Blue;'>Wasp zdrwvrw Pe I DLm</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>16</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>AkrfafkWnpqfRwacp</td>
<td style='text-align:left;color:Blue;'>scjle</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>17</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>BckX Ligqncz y Rjccsy</td>
<td style='text-align:left;color:Blue;'>Yjezxpo fqe Fbea 😀</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>18</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>BjavlsfLuxkdLincj</td>
<td style='text-align:left;color:Blue;'>lva’c ccxk</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>19</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Jcpod Zwlw</td>
<td style='text-align:left;color:Blue;'>Sjhkrxk wyyoycrd</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>20</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>TkhbWmmgs GlsLtsQtsckc</td>
<td style='text-align:left;color:Blue;'><span style='background-color:red; color:black;'>@nzmqtrk</span> - B iwm'k aur ggen hrcgg jdwryus qcbpdu!</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>21</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Pn. Rlb Tey</td>
<td style='text-align:left;color:Blue;'>Byhbs @Lnspvfru 2ijejb</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>22</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>BqcdrvlYrlslOxrdj</td>
<td style='text-align:left;color:Blue;'>gojcgvw</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>23</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Sa. V-EMm</td>
<td style='text-align:left;color:Blue;'>Law abg isqvtjase xkse</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>23</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Ogkg Mosqnm WRY</td>
<td style='text-align:left;color:Blue;'>X uqh dn Fdyazq Tffpw</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>25</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Kse Miafmzt Lwkgytj</td>
<td style='text-align:left;color:Blue;'>@Ukgn Myptyl WTR J ugka oibnu nj bpncs ibh gkxsrtpky.</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>26</td>
<td style='text-align:center;color:Blue;'>07:32</td>
<td style='text-align:left;color:Blue;'>Nxvi Vuhkor65</td>
<td style='text-align:left;color:Blue;'>Gyrgid Pgsata. Juema vl fbjl mw fwyo mvp dm mqyh v aoraz nhdh.</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>27</td>
<td style='text-align:center;color:Blue;'>07:31</td>
<td style='text-align:left;color:Blue;'>AtuK Ejowvma m Mpzkua</td>
<td style='text-align:left;color:Blue;'>Pxgbwqvmzixhvfh 😀</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>28</td>
<td style='text-align:center;color:Blue;'>07:31</td>
<td style='text-align:left;color:Blue;'>Jydrimd 2wegxj</td>
<td style='text-align:left;color:Blue;'>Qzvj xssvokx pnuai fzhrlyble</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>29</td>
<td style='text-align:center;color:Blue;'>07:31</td>
<td style='text-align:left;color:Blue;'>Wjvncc Dktha</td>
<td style='text-align:left;color:Blue;'>Rusf haqpqbd 🌞 Mqclon 🌅 Wii lsz lym qau cltthbvc fbefuyc?</td>
</tr><tr>
<td style='text-align:right;color:Blue;'>30</td>
<td style='text-align:center;color:Blue;'>07:31</td>
<td style='text-align:left;color:Blue;'>Btfl Ylyiyc SFC</td>
<td style='text-align:left;color:Blue;'>Mqxk xeqmvno Nwurfehhhshsxjhsz</td>
</tr>
<tr><th colspan=4 style='background-color: #666 ;color: #fff ;z-index: 20 ;min-height: 30px ;height: 30px ;text-align: left ;'>End of data.</th></tr></table></div></div><script>
const ctx = document.getElementById('concurrentChart') ;
new Chart(ctx
, { type: 'line'
, data: {
labels: ["07:08","07:09","07:10","07:11","07:12","07:13","07:14","07:15","07:16","07:17","07:18","07:19","07:20","07:21","07:22","07:23","07:24","07:25","07:26","07:27","07:28","07:29","07:30","07:31","07:32","07:33","07:34","07:35"]
, datasets: [{
label: 'Concurrent Chat Viewers'
, data: [0,8,8,9,6,8,8,3,5,7,4,4,1,3,8,8,6,6,4,7,11,16,14,9,7,9,6,9]
, fill:false
, borderColor: 'rgb(75, 192, 192)'
, tension: 0.1
, spanGaps:true
}]
}
});
</script></body></html>Edit:
If you want the text within the table cells to wrap to multiple lines instead of overflowing and causing horizontal scrolling, you should modify the white-space property to normal for the elements inside the chat messages table. Here's the modified CSS:
#chats table td {
white-space: normal; /* Allow text to wrap to multiple lines */
}
Make sure to add this CSS to your existing section in the of your HTML document. With this change, the text within the table cells should wrap to multiple lines when needed, preventing horizontal overflow and scrolling.