We Keep Coding

Is it possible to extend the borders of table data <td> to align with content that has been moved via negative margins?

I have a collapsible table, which opens and closes when clicking on Accounting. It requires a unique layout. I have added a checkbox to my collapsible rows, which must align with the Date column. I have shifted all my titles over with a negative margin, in order to group with the checkbox. Now, I need to extend the borders, so they appear underneath the titles again(see picture below). I have created a codesandbox for your review. Can anyone advise on the best method to extend the borders, so they align with the titles? Please note: My date column uses rowspans, so I don't believe adding padding-left will resolve the issue.
Code Snippet:
<tbody>
<tr>
<td rowSpan="3" id="date">
Date
</td>
<td colSpan="4">
<label className="accounting-label" htmlFor="accounting">
Accounting
</label>
<input
type="checkbox"
name="accounting"
id="accounting"
data-toggle="toggle"
onClick={showNestedData}
></input>
</td>
</tr>
<tr className="accounting-data hide">
<td className="australia-data">
<div className="flex-au-wrapper">
<div className="au-checkbox-wrapper">
<input
type="checkbox"
id="au-checkbox"
name="subscribe"
value="newsletter"
></input>
</div>
<div>Australia</div>
</div>
</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>

To extend table border you can give some padding,you can also you can select the one you want with :nth child

in codesandbox the bottom border already covered the checkbox and title 'Accounting'. So, if you also want to cover the Date then please add the following CSS code to yours
.accounting-data,
tr {
position : relative;
/* border-bottom: 1px solid #ccc; */
}
th, td{
border: 0;
}
tr::before {
content : "";
display: block;
position: absolute;
width: calc(100vh + 150px);
top: 0;
background: #555;
border-bottom: 1px solid #ccc;
left: 0;
}
May it helps :)

6 sub-DIV's, one container DIV, Grouped in 3 pairs of 2, left,center,right justified

Was my title strong enough?
I want a DIV that goes a horizontal length of a page, then I want 6 divs inside of that that are grouped in 2 (info, pic) Where the group on the left is fastened to the wall, the group on the right is fastened to the wall, and the group in the center is exactly in the center.
Here's my code so far:
<div class="contactus.container">
<div class="contactus.left">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block" >
<img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div class="contactus.center">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block">
<img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div class="contactus.right">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block;">
<img align="right" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div style="clear:both;"></div>
</div>
And here's the CSS:
.contactus.container {
width:100%;
text-align:center;
}
.contactus.left {
float:left;
width:100px;
}
.contactus.center {
display: inline-block;
margin:0 auto;
width:100px;
}
.contactus.right {
float:right;
width:100px;
}
.content {
display: inline-block;
vertical-align: top;
Getting al ittle frustrated now. All it does is have a line down the left side. All 6 divs.

First thing's first, you cannot use . inside your class name, as mentioned by #grammar in the comments (props to #Scot for copying it to an answer). When you make a reference to .contactus.left in your css, it will look for an element with two classes, like class="contactus left". For the divs you have with class names like contactus.left, you could either give them two separate classes, like <div class="contactus left"> or use a separator like an underscore or a hyphen, such as <div class="contactus-left">.
However, correcting that will not solve your problem. As for what you are trying to accomplish, I believe you mean to say that you want 2 groups of 3 (left, center, and right). To accomplish this, you will want each sub-div to have the display: inline-block style instead of just the center div, and to make sure the center div is actually centered on the page, you will want to divide up the width of the container amongst the three inner divs, and assign the appropriate text-align value to each.
See this fiddle.
You can manage the div sizing yourself, just assigning a percentage for the width of each div. Alternatively, there are css frameworks like foundation and bootstrap that help you manage your page layout with a grid system that basically uses percentages and inline-block elements, and provide you with intuitive class names to easily put your content where you want it.

I think you have named and formatted your classes incorrectly.
Try renaming the css classes like this:
.contactus_center {
display: inline-block;
margin:0 auto;
width:100px;
}
and your HTML like this:
<div class="contactus_center">

Making a table dynamic

Made a table for a product listings page that has a row of 3 images, then a row of text below each image, then repeat. Rather than have the page scroll down indefinitely, I figure it would be better to use some JS/jQuery to change the values in each < td > (img & matching text) than to create a new page for every 6 products. However, my kindergarten-level JS is failing me miserably.
While I think the question I'm asking above is pretty obvious, I'm also wondering if this never should have been set up as a table in the first place. It seemed like the easiest way to keep it organized, but the few examples I've seen seem to do this with < div >'s rather than tables.
Here's a JSFiddle I was messing around with: http://jsfiddle.net/jshweky/FgVY2/
HTML:
<table id="saladGrid">
<tr class="saladPics">
<td class="s1"></td>
<td class="s2"></td>
<td class="s3"></td>
</tr>
<tr class="saladTxt">
<td class="txt">
<p>acorn squash, golden beets, pistachios</p>
</td>
<td class="txt">
<p>roasted eggplant, herbed ricotta, sumac</p>
</td>
<td class="txt">
<p>arugula, fennel, blackberries, quinoa, pickled shallots</p>
</td>
</tr>
<tr class="saladPics">
<td class="s4"></td>
<td class="s5"></td>
<td class="s6"></td>
</tr>
<tr class="saladText">
<td class="text">
<p>arugula, orange, golden beets, golden tomatoes, pistachios</p>
</td>
<td class="text">
<p>caesar</p>
</td>
<td class="text">
<p>butternut squash, lime, feta, chili</p>
</td>
</tr>
</table>
<button id="prev">Prev</button>
<button id="next">Next</button>
CSS (paraphrased):
table {
width: 100%;
height: 100%;
margin-top: 0;
padding: 0;
border: 0;
border-spacing: 0;
}
td {
margin: 0;
padding: 0;
border: 0;
text-align: center;
vertical-align: middle;
}
#saladGrid table {
margin: 0 auto;
border-spacing: 30px;
}
.saladPics td {
height: 350px;
width: 350px;
background-position: center;
background-size: 415px 400px;
background-repeat: no-repeat;
border-radius: 250px;
border: 1px black solid;
}
.saladText {
position: relative;
margin-bottom: -20px;
}
.saladPics td.s1 {
background-image: url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");
}
I figure it's a matter of creating new var's and writing a function to add 6 to the existing img class (e.g. s1 becomes s7, etc.) but that's just a guess and as I said, even if that's right I'm still in the embryonic stages of JS coding.

Your JavaScript to Swap the image works fine, the issue is the first part of your script. I commented it out in the fiddle and it worked fine. There are definitely better ways to do this (sliding DIVs inside a container, build elements in javascript and append them to the frames on the page - this would give you almost a pinterest style effect of loading new elements at the bottom) - it all depends on how you want to handle it but my suggestion would be to look into using jQuery to add or remove elements to the DOM.
//var s7= new image();
//img.src=url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHC9Vk1U5yC5RWMhUK9Ai2RGIDCSh-wxPt-aleQm9onxi9xbN9dA');
$(document).ready(function () {
$('#prev').click(function () {
$('.s1').css('background-image', 'url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg")');
});
});
Also, here is an alternate syntax for the .css() that will let you change more than one property of an elements at a time (you will need to use the .html() function to change the text in the following element too):
$('.s1').css({backgroundImage : 'url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg")', backgroundSize : "cover"}); });

Align and Format Multiple Elements Dynamically Added to Table Row

I'm trying to make a greasemonkey userscript where I add a div through an ajax request to a table. The table repeats this pattern around 700 times:
<table id="table01" >
<tr class = "row0">
<td rowspan = "2" >
<img src = "url" >
</td>
<td> text1 </td>
<td style = "text-align: right;" > text2 </td>
</tr>
<tr class = "row1">
<td> text3 </td>
<td style = "text-align: right;" > text4 </td>
</tr>
...
...
...
</table>
I can't manage to insert the div and and set the css alignment to make it look like in the image:
http://s24.postimg.org/wastsl5it/Sin_t_tulo.png
How can I do it using javascript or jquery?
thanks in advance

See the output here:
jsFiddle
My solution is to work with percentages. The width of the page is 100% percent. When the elements reach 100% percent, it will force the next element wrap around into a position below. And use float, not text-align: right. I set everything to float:left, and set the width so that elements will wrap around to the next line.
<table id="table01" >
<tr class = "row0">
<div style="width:20%; float:left; border: solid thin purple">
<img src = "url" >
</div>
<div style="width:79%; float:left">
<div style="width:49%; float:left; border: solid thin"> text1 </div>
<div style = "width: 49%; float:left; border: solid thin red"> text2 </div>
<div style="width: 98%; float:left; border: solid thin blue">Center</div>
<div style = "width: 48%; float:left; border: solid thin green"> text3 </div>
<div style = "width: 48%; float:left; border: solid thin orange"> text4 </div>
</div>
</tr>
<tr class = "row0">
<div style="width:20%; float:left">
<img src = "url" >
</div>
<div style="width:80%; float:left">
<div style="width:50%; float:left"> text1 </div>
<div style = "width: 50%; float:left" > text2 </div>
<div style="width: 100%">Center</div>
<div style = "width: 50%; float:left"> text3 </div>
<div style = "width: 50%; float:left"> text4 </div>
</div>
</tr>
</table>
Note that the <div> you were having trouble with, is set to a width of 100% percent. So it will take up all of it's section. Also, realize that the <div> set to 100% percent does NOT take up 100% percent of the page. It takes up 100% percent of the <div> that it is inside of. That is the other thing you need to know. The widths are relative to the element that they are inside of.
With borders added, so you can actually see how everything lays out, the widths need to be smaller, because the borders take up space. So, 100% width with a border added is more than 100% percent. So you have to change the width to something smaller, 99% percent maybe.

Make HTML Table height equal to the middle TD elements height

I have a HTML table with 1 row. In that row there are 3 cells(td elements). The centre cell contains p elements & all the main content of the page. The left & right td elements contain an img element; they are images of the left & right sides blue column.
My Problem: I am trying to make the height of the table be equal to the height of the centre td element only. And the left & right images will scale up & down according to the dimensions(height) of the centre td element. But right now, the table is always 1200px in height & thats because the left & right images are 1200px in height.
I hope this makes sense & that you understand what I am attempting to do :P So I am tryinging to make the table height equal to the height of the centre td cell only.
Is there a way to do this in pure HTML & CSS. If not javascript will do it wont it?
.contentTable { height: inherit; }
.tableTopPanel { height: 6.25%; }
.tableBottomPanel { height: 6.25%; }
.tableLeftPanel { width: 6.25%; padding: 0; margin: 0; }
.tableRightPanel { width: 6.25%; padding: 0; margin: 0; }
.tableCentrePanel { background-color: #FFFFFF; }
.pageContent { border-color: #99CCFF; border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; padding-top: 0.5em; border-top: 0; }
<table class="contentTable" id="test">
<tr>
<td class="tableLeftPanel"><img src="../Images/contentLeftBk.png" alt=""/></td>
<td class="tableCentrePanel">
<img class="pageHeading" src="Images/coursesHeading2.png" width="100%" alt=""/>
<div class="pageContent" id="coursesContent">
<p>Kazcare cooperates with WEA Illawarra to offer a range of educational courses.</p>
<p>Some of the courses held at Kazcare Education Facilities include: </p>
<ul class="leftCol">
<li>Front Line Management Courses</li>
<li>Cert 4 Training & Assessment</li>
<li>Environment Courses</li>
<li>Music Appreciation</li>
<li>Craft Classes</li>
<li>Candle Making</li>
</ul>
<ul class="rightCol">
<li>Art Classes</li>
<li>Drawing Classes</li>
<li>Yoga</li>
<li>Dancing</li>
<li>Exercise Classes</li>
<li>Art History Classes</li>
</ul>
<br/>
<p class="a">
To view the full range of WEA Illawarra courses held at KazCare please visit WEA Illawarra Courses.
</p>
</div>
</td>
<td class="tableRightPanel"><img src="../Images/contentRightBk.png" alt=""/></td>
</tr>
</table>

If I were implementing a layout like this, I would likely rely on pure CSS instead of using a table. There are numerous examples of three column layouts online, here's one example:
http://www.manisheriar.com/holygrail/index.htm
If you want to use the table, I suppose it depends on what the contents of your images look like - should they be vertically tiled if the page gets too long? Does it need to be a certain width? There are a few options here, but having an idea of what you're trying to build would help. Here are a few options:
Use the background-image property of CSS - http://www.w3schools.com/cssref/pr_background-image.asp
Set a fixed width on the outer TD elements, and set overflow to hidden: http://www.w3schools.com/cssref/pr_pos_overflow.asp
Hope this helps, happy coding!