@charset "utf-8";
/* GL Base Reset________________________*/
p, div, caption, figure, figcaption, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
section { margin: 0 10px; }
p { margin-bottom: 15px; }
/* Typography ________________________________________________________*/
html { font-family: Arial; font-weight: 600; font-size: 16px; line-height: 1.45; }
caption { font-weight: 900; font-size: 1.05rem; margin-bottom: 5px; }
sup { font-size: 60%; position: relative; top: -.4em; vertical-align: baseline; }
/* Structure __________________________________________________________________________________________________*/
img { margin: 20px auto; max-width: 720px; max-height: 500px; border: none; display: block; }
.cap { margin-bottom: -14px; margin-top: 20px; }
.vid { margin: 20px auto; border: none; }
header, footer { width: 100%; height: 40px; clear: both; position: relative; }
.note { color: #FC3; }
/* Links ________________________________________*/
a, a:link { color: #7CCDFD; text-decoration: none; }
a:visited { color: #CCC; }
a:hover { color: #000; background: #7CCDFD; }
a:active { color: #0FC; background: #333; }
/* Lists _________________________________________*/
ol, ul, dl { margin-bottom: 12px; margin-left: 20px; }
ol.q { list-style-type: decimal-leading-zero; }
ol.a { list-style-type: lower-alpha; }
ol.c { list-style-type: upper-roman; }
ol.e { list-style-type: upper-alpha; }
ul.nb { list-style-type: none; }
li, dt, dd { margin-bottom: 6px; }
ol.q > li { margin-bottom: 9px; }
ol.c > li { margin-bottom: 9px; }
div > li { color: inherit; }
ul > dt { margin-left: -1.375; }
ul.fq { position: relative; left: -20px; width:100%; border: thin solid #ECB162; background-position: left; color: #DDD; background-color: #555; border-radius: 8px; box-shadow: 2px 3px 2px #777; }
ul.fq > li { margin: 0 0 2px 25px; }
ul.fq > li:first-child { margin: 2px 0 2px 25px; }
/* Tables ____________________________________________________________________________________*/
table.glc3 { padding: 0; box-shadow: 0 1px 9px 1px #ccc; border-radius: 6px; margin: 20px auto; }
.glc3 th { color: #333; background: #FFA85E; padding: 5px; text-align: center; vertical-align: middle; }
.glc3 td { border-style: solid; border-width: 1px; border-color: #FFA85E; padding: 5px; text-align: left; vertical-align: top; background-color: #333; color: #FFF; }
thead th:first-child { border-top-left-radius: 6px; }
thead th:last-child { border-top-right-radius: 6px; }
.glc3 tr:last-child td:first-child { border-bottom-left-radius: 6px; }
.glc3 tr:last-child td:last-child { border-bottom-right-radius: 6px; }
/* Generated Tables _______________________________________________________________________________*/
.t100 { width: 100%; }
.box { width: 100%; height: auto; min-height: 30em; }
.box *, .box *:before, .box *:after { box-sizing: border-box; padding: 0; margin: 0; border: 0 hidden transparent; outline: none; border-spacing: 0; border-collapse: collapse; }
table.glh8 { box-shadow: 0 1px 9px 1px #ccc; margin: 20px auto; width: 90%; }
.box > table.glh8 > tbody > tr:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.box > table.glh8 > tbody > tr:first-child > td:first-child { border-top-left-radius: 6px; }
.box > table.glh8 > tbody > tr:first-child > td:last-child { border-top-right-radius: 6px; }
.box > table.glh8 > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 6px; }
.box > table.glh8 > tbody > tr:last-child > td:last-child { border-bottom-right-radius: 6px; }
.rows { border: 1px solid #D0580F !important; border-left: none !important; border-right: none !important; }
.coloum { border: 1px solid #D0580F !important; border-top: none !important; border-bottom: none !important; background-color: #FFA85E; }
.multi_div { color: #000; background: #FFA85E; text-align: center; vertical-align: top; height: 48px; }
.box > table.glh8 > tbody > tr:nth-child(n+2) > td:first-child * { text-align: left; }
.student_inp { text-align: left; vertical-align: top; background-color: #FFF; color: #000; display: block; height: 64px; width: 100%; }
.tcap, #iii > div > h3:last-of-type { margin: 0 auto 5px; text-align: center; }
textarea.student_text { width: 98%; margin: 1%; height: 100px; }
/* Table Configurations ___________________________________________________*/
/* Ratio 33:33:33 */
table.r33x3 > tbody > tr:first-child > td { width: 33% !important; }
/* Ratio 5:5 */
table.r5x2 > tbody > tr:first-child > td { width: 50% !important; }
table.r5x2 .student_inp { width: 96% !important; }
/* Ratio 1:3:3:3 */
table.r1-3x3 > tbody > tr:first-child > td:first-child { width: 10% !important; }
table.r1-3x3 > tbody > tr:first-child > td:nth-child(n+2) { width: 30% !important; }
table.r1-3x3 { width: 100% !important; }
/* Ratio 25x4 */
table.r25x4 > tbody > tr:first-child > td:first-child { width: 25% !important; }
table.r25x4 > tbody > tr:first-child > td:nth-child(n+2) { width: 25%; }
table.r25x4 { width: 100% !important; }
/* Ratio 2:4:4 */
table.r2-4x2 > tbody > tr:first-child > td:first-child { width: 20% !important; }
table.r2-4x2 > tbody > tr:first-child > td:nth-child(n+2) { width: 40% !important; }
/* Ratio 3:7 */
table.r3-7 > tbody > tr:first-child > td:first-child { width: 30% !important; }
table.r3-7 > tbody > tr:first-child > td:last-child { width: 70% !important; }
table.r3-7 > tbody > tr > td:first-child * { text-align: center !important; }
table.r3-7 .student_inp { width: 95% !important; }
/* Ratio 12:22:22:22:22 */
table.r12-22x4 > tbody > tr:first-child > td:first-child { width: 12% !important; }
table.r12-22x4 > tbody > tr:first-child > td:nth-child(n+2) { width: 22% !important; }
table.r12-22x4 { width: 100% !important; }
table.r12-22x4 .student_inp { width: 93% !important; }
/* Ratio 2:2:6 */
table.r2x2-6 > tbody > tr:first-child > td:nth-child(-n+2) { width: 20% !important; }
table.r2x2-6 > tbody > tr:first-child > td:last-child { width: 60% !important; }
table.r2x2-6 > tbody > tr > td:last-child > input.student_inp { width: 97% !important; }
/* Ratio 2:8 */
table.r2-8 > tbody > tr:first-child > td:first-child { width: 20% !important; }
table.r2-8 > tbody > tr:first-child > td:last-child { width: 80% !important; }
table.r2-8 .student_inp { width: 96% !important; }
/* Vertical Head Only */
table.vhd > tbody > tr > td:first-child * { text-align: left !important; }
/* Vertical & Horizontal Head */
table.vhhd > tbody > tr:nth-child(n+2) > td:first-child * { text-align: left !important; }
tr.num > td * { text-align: right; }
.txtc { text-align: center !important; }
.txtl { text-align: left !important; }
.txtr { text-align: right !important; }
.t100 { width: 100% !important; }
/***************************************************
**USE_______________________________________________
<script>
window.onload = tableClass;
function tableClass() {
$('basictable_XXXXXX').addClass('CLASS CLASS CLASS');
}
</script>
**
****************************************************
*/
/* Panels ___________________________________________________________________________________________*/
#themePanel input { background-repeat: no-repeat; text-indent: -9999px; border: thin outset hsla(26, 100%, 60%, 0.7); border-radius: 5px; display: inline-block; width: 32px; height: 32px; cursor: pointer; }
#themePanel { position: absolute; top: 10px; right: 20px; z-index: 75; pointer-events: auto; }
#dark { background-image: url('https://s3-us-west-1.amazonaws.com/glpro/_img/panel/dTheme.png'); }
#light { background-image: url('https://s3-us-west-1.amazonaws.com/glpro/_img/panel/lTheme.png'); }
.disabled { opacity: 0.3; }
/*| Dark Theme General___________________________________________________________________________*/
body { background-color: #333; color: #FFF !important; font-size: .95rem; }
#plus { background-image: url('https://s3-us-west-1.amazonaws.com/glpro/_img/panel/incFont.png'); }
#minus { background-image: url('https://s3-us-west-1.amazonaws.com/glpro/_img/panel/decFont.png'); }
#reset { background-image: url('https://s3-us-west-1.amazonaws.com/glpro/_img/panel/resetFont.png'); }
/* Dark Theme Section III__________________________________________________________________*/
#iii h1, h2, h3, h4, h5, h6, .cap, dt, hr, caption, figcaption { color: #F90 !important; }
/* High Priority|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
h1 { font-weight: 800; font-size: 19px; font-size: 1.2rem; margin-bottom: 5px; margin-bottom: .3125rem; }
h2 { font-weight: 800; font-size: 18px; font-size: 1.125rem; margin-bottom: 5px; margin-bottom: .3125rem; }
h3 { font-weight: 700; font-size: 17px; font-size: 1.1rem; margin-bottom: 5px; margin-bottom: .3125rem; }
h4 { font-weight: 700; font-size: 17px; font-size: 1.075rem; margin-bottom: 5px; margin-bottom: .3125rem; }
h5 { font-weight: 600; font-size: 16px; font-size: 1rem; margin-bottom: 5px; margin-bottom: .3125rem; }
h6 { font-weight: 600; font-size: 15px; font-size: .95rem; margin-bottom: 5px; margin-bottom: .3125rem; }
.bkg { background: #333 !important; }
.def > div { color: #FFF !important; }
.inv { color: #333 !important; background: #FFF !important; }
blockquote.bq.bq { font: .95rem/1.5; background-color: #FFE8B8; border-top: .15rem solid #6B2E00; border-bottom: .15rem solid #6B2E00; margin: 1rem; background-image: url('https://d2a1kahqd5g6v7.cloudfront.net/img/q/oQ1.gif'); background-position: top left; background-repeat: no-repeat; }
blockquote.bq.bq span { color: #300 !important; display: block; background-image: url('https://d2a1kahqd5g6v7.cloudfront.net/img/q/cQ1.gif'); background-repeat: no-repeat; background-position: bottom right; letter-spacing: .03125rem; padding: .95rem 1.2rem; margin: .5rem 0; }
.hilite.hilite { color: #009; }
img { max-width: 100%; }
.jwplayer { max-width: 100% !important }
@media screen and (max-width:700px) {
img { max-width: 100% !important; }
iframe { max-width: 100%; }
.timeline-series { width: 100%; }
.bq, .bq span, .timeline-event-content p, .timeline-wrapper { width: 100%; }
.ms-left { width: 100% !important; }
#audioBox { width: 100%; }
.bx-pager { bottom: 120px; }
body { /* width: 95vw; */
max-width: 95%; -webkit-text-size-adjust: none; }
.keytermstable { width: 100%; }
#themePanel { display: none; }
p { font-size: 14px; }
header { }
.timeline-container { max-width: 100%; }
}
@media screen and (max-width:500px) {
#themePanel { top: 47px; }
section { margin: 0; margin-top: 15px; }
iframe { width: 100%; height: 100%; overflow: auto; }
.timeline-series { width: 100%; }
.bq, .bq span, .timeline-event-content p, .timeline-wrapper { width: 100%; }
.ms-left { width: 100% !important; }
#audioBox { width: 100%; }
.bx-pager { bottom: 120px; }
body { /* max-width: 95vw; */
max-width: 95%; /* max-width: 100%; */
height: 512px; overflow-y: scroll; margin: 2px; }
html { height: 512px; }
.keytermstable { width: 100%; }
#themePanel { display: none; }
#audioBox { width: 100%; }
.aud { width: 100%; }
#positionButtonDiv { display: none; }
.bx-wrapper .bx-pager { top: 100%; bottom: initial; }
.vid { width: 100%; }
section { width: 100%; }
.glb2 td, .glb2 th { font-size: 8px; padding: 2px; border-style: solid; border-width: 1px; }
table.glb2 { border-collapse: collapse; box-shadow: none; border-radius: 0px; }
blockquote.bq.bq { margin: 1px; }
li, dt, dd { max-width: 100%; }
}
.sleft { float: left; }
.sright { float: left; }
@media screen and (min-width:560px) {
.bx-pager { width: 110px; }
}
@media screen and (min-width:500px) {
.sleft { width: 50% !important; }
.sright { width: 50% !important; }
}
.ms-section { position: inherit; }
.aud { max-width: 100%; }
#audioBox { max-width: 100%; }
.org { color: #F90 !important; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Solved</title>
<!-- Because of the table being generated when the page loads, I must style it indirectly through CSS and JS -->
<link href="style.css" rel="stylesheet">
<style>
/* I have used every combo of nth-child and typeof to traverse the table, the multitudes of styling would just complicate things but if your'e curious, I could post my CSS */
/************************************RESOLVED SEE http://embed.plnkr.co/A4aRNCHAIwwy7Y6rYtc9/***********************************************************
*****************************************For the issue, this is the solution***************************************************************************
** table-layout is auto by default, if you experiencing Chrome ignoring your widths, set table-layout to fixed. *************************************/
table.glh8 { table-layout: fixed; width: 90%; }
/***************************************************************************************************************************************************/
</style>
</head>
<body>
<header>
<!-- The themePanel is disabled since it's not relavent to this situation -->
</header>
<section id="iii">
<h1>sdnnsdgnour JSDNUGBERU</h1>
<h2>anvdioOVNoifO iubIUnun</h2>
<h3>Questions</h3>
<!-- Generated Markup Start =======================================================================================================-->
<div>
<ul>
<li>eroauuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuutnb kmz</li>
<li>issssssssssssaerow84tun3pUO;HA93P5N63-Q</li>
<li>jrskuldio;r876s5e4wrqe2RGEfgjsd,.fuytfd</li>
</ul>
<p>ugoawou;ggn;anw;gOiqhwduWW>:OI;HO;/Egwhrn UIA FL 7WI74TY9P2 8u3ry8g</p>
<p>yliggggggggggggggggggggggggggggggw44444444444444444444444444444YIGREAPUHYYYYYYYYYYYYYYYYYYYYYYYYYYYQQQQQQQO;ZNO;UHNNN</p>
<h3>Position Chart</h3>
</div>
<div class="box">
<table id="basicTable_97678" class="glh8" >
<tbody>
<tr class="rows">
<td class="coloum"><div data-type="0" class="multi_div" style=""> </div></td>
<td class="coloum"><div data-type="0" class="multi_div" style="">◄ Liberal</div></td>
<td class="coloum"><div data-type="0" class="multi_div" style="">Moderate<br/>
« Liberal</div></td>
<td class="coloum"><div data-type="0" class="multi_div" style="">Moderate<br/>
Conservative »</div></td>
<td class="coloum"><div data-type="0" class="multi_div" style="">Conservative ▶</div></td>
</tr>
<tr class="rows">
<td class="coloum"><div data-type="0" class="multi_div" style="">Candidate</div></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
</tr>
<tr class="rows">
<td class="coloum"><div data-type="0" class="multi_div" style="">Politics</div></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
</tr>
<tr class="rows">
<td class="coloum"><div data-type="0" class="multi_div" style="">Groups</div></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
<td class="coloum"><input disabled type="text" name="text" class="student_inp" data-type="1" size="24" value="" placeholder=""></td>
</tr>
</tbody>
</table>
</div>
<!-- Generated Markup End ==========================================================================================================-->
</section>
<footer> </footer>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script>
/* This crappy function actually works, what it does is assign height and width attributes to td in a group or as a single. */
/* I have also made functions that adds classes and another that adds properties */
/* I have had success in altering the previous tables one way or the other, but this particular one eludes me */
$("tbody").css("width","75%");
window.onload = expander('1', 'n+2', '54px', '22%');
expander('1', '1', '54px', '12%');
function expander(row, col, hgt, wth) {
var row = "tr:nth-child("+row+")",
col = "td:nth-child("+col+")",
tgt1 = $("table.glh8 > tbody > "+row+" > "+col),
tgt2 = $("table.glh8 > tbody > "+row+" > "+col+" *");
if(hgt) {
tgt1.attr("height", hgt);
tgt2.attr("height", hgt);
}
if(wth) {
tgt1.attr("width", wth);
tgt2.attr("width", wth);
}
}
</script>
</body>
</html>