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 :)

Show last table column on line hovering

In a centered table is the last column hidden.
On hovering over a specific line I want the table to show the last column of this single line.
This should be offering the ability to edit and delete (AJAX) the content/object of the line.
Here's a example:
https://jsfiddle.net/5x2wv160/1/
The problem is the changed size of the table so it is moving a little bit to the left.
My idea fixing this is to change the last column to
tr > td:last-child {
position: relative;
}
But what base element do I have to set the display-style too?
Does anyone have any better ideas?

Check this way of showing the last column on hover to <tr>
.action {
display: none;
}
tr:hover .action{
display: block;
}
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content1</td>
<td>Content2</td>
<td class="action">Edit</td>
</tr>
<tr>
<td>Content3</td>
<td>Content4</td>
<td class="action">Edit</td>
</tr>
<tr>
<td>Content5</td>
<td>Content6</td>
<td class="action">Edit</td>
</tr>
</tbody>
</table>

You can use visibility instead of dispay:none like this:
table {
margin: 0 auto;
}
tr > td:last-child {
visibility: hidden;
}
tr:hover > td:last-child {
visibility: visible;
}

You are on the right way. But how about only showing contents thus the hyperlink on hover. tr td a { display:none; } VS tr:hover td a{ display:block} so the content would not be moving left and right. Also setting standard widths for each table column would prevent that the columns are moving

Removing whitespace in collapse row

Bootply: http://www.bootply.com/N8lH48VBN7
I have rows where I want each row to expand to show additional rows but I'm having trouble getting rid of the whitespace even when the hidden row is not expanded. I think there might be a way to write a function in JS, but is there a faster and easier way to do this?
Also, when the collapsed rows are expanded, there is some whitespace, and I tried to change some properties of the div to no avail.

Bootstrap has a css style itself.
(so, if you want to apply your css style, you have to use '!important' keyword in your css.)
and, your code structure is not good as well.
therefore, it made a little space inside of each table row.
I think you want to do like this. :)
[RESULT] http://www.bootply.com/0QqWzFcwWo#
1. HTML Source
<div class="col-lg">
<div class="project" id="prodemo"></div>
<table class="table table-striped table-hover">
<thead align="center">
<tr>
<th width="1%"> </th>
<th width="24%">ID</th>
<th width="25%">Name</th>
<th width="25%">Phone</th>
<th width="25%">DOB</th>
</tr>
</thead>
<tbody>
<!-- [demo] -->
<tr class="prevent_drag" data-target="#demo" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
<!-- [demo2] -->
<tr class="prevent_drag" data-target="#demo2" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo2" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
<!-- [demo3] -->
<tr class="prevent_drag" data-target="#demo3" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo3" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
</tbody>
</table>
</div>
2. CSS source
.myOptions {
padding: 0 !important;
margin: 0 !important;
color: red;
}
.table th {
cursor:default;
}
.prevent_drag {
cursor:pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

See this bootply
Just add this css and stay away from !important as other answers suggest.
.table>tbody>tr>td[colspan] {
padding: 0;
}
.table>tbody>tr>td[colspan] .table {
margin-bottom: 0;
}
Never use !important
Almost all answers here suggest to use !important. I think all of them need to read about CSS Specificity and stop using !important today.

...Or you could add this JS code:
$("td[colspan]").css("padding", "0");
$(".table").css("margin-bottom", "0");
Here is the Bootyply
Or can use pure CSS like this:
td[colspan]{
padding:0 !important;
}
.table{
margin-bottom:0 !important;
}
CSS Only Bootply

Use below code in css
tr td{padding: 0!important;}
Thanks With Regards

Remove padding-top and padding-bottom only from your collapsed rows. This padding is coming from bootstrap table style.
tr:not([data-toggle]) > td { padding-top: 0px; padding-bottom: 0px; }
Selecting the cells which are children of rows which do not carry an attribute called data-toggle.
There is margin in the nested table as well. You can remove that:
.table tr:not([data-toggle]) table,
.table tr:not([data-toggle]) td {
padding: 0; margin: 0px;
}

Use this CSS style
tr[data-toggle="collapse"] + tr td {
padding: 0 !important;
}

Bootstrap table plugin not working in 'rtl' table

I'm working with Arabic bootstrap for rtl support . I have a table and Bootstrap table plugin.
HTML :
<table class="bootstrap-table" id="listComments">
<tr>
<th data-fixed="right">
<input type="checkbox" id="checkAll" />
</th>
<th class="text-right">Title</th>
<th style="width: 200px">Category</th>
<th style="width: 140px">Created date</th>
<th style="width: 100px">Status</th>
<th data-fixed="left">Actions</th>
</tr>
<tr>
<td>
<input type="checkbox" name="id[]" class="itemCheckBox" value="6" />
<input type="hidden" name="token[6]" value="b8c5b7b3584268c8a85f1a14c34699dd" />
</td>
<td>2323</td>
<td>Project</td>
<td>09-19-2014</td>
<td> Published
</td>
<td> <a class="btn btn-info btn-xs" href="" title="Edit post"><i class="icon-edit"></i></a>
<a class="btn btn-danger btn-xs confirmationDelete" href="" title="Delete post"><i class="icon-trash"></i></a>
</td>
</tr>
</table>
Now, I designed my table with bootstrap table plugin. Plugin works using: data-fixed="right" or data-fixed="left". With data left and normal this works fine. But in Arabic Bootstrap and data right , this plugin is not working and shows horizontal scroll and displaced border.
how can I fix this for rtl table?
DEMO RTL NOT WORK : JSFIIDDLE
DEMO NORMAL LTR WORK : JSFIDDLE
Screenshot in FF last version: (SEE scroll and right border Displaced for status and create date..)

Well, your problem isn't really complex, I think that using classes for your td elements would have help you a lot, and I strongly encourage you to use them for this and any other project.
Now, for your solution, simply add this couple lines in your CSS style sheet:
.table-scroll .table-body td:first-child {
border-right:none
}
.table > tbody > tr > td {
width: auto;
max-width: 100%;
}
Of course, it will be a lot better if you use something like .table.tableRtl td{....} so you can target elements properly and more accurately while letting you use the .table class in other instance(s), but as long as your code goes, this CSS will work.
EDIT
there's an issue with one of the columns not having border. This happens because you have this line in bootstrap-table.css
.table-scroll .table-body td:last-child {
border-right: medium none;
}
so basically it overrides all borders it has declared previously telling "in the last column, we should have no borders". But in rtl direction, the last column is in fact VISUALLY the first, so we fix it like this:
.table-scroll .table-body td:last-child, .table-scroll .table-header th:last-child {
border-right: 1px solid #CCC;
}
And now it all works as expected, with columns keeping the width as well, and borders behaving as expected
Check CSS fiddle

As mentioned by webeno, the problem seems to be that bootstrap-table.css applies these rules:
.table-scroll .table-header th:last-child{
border-right:none;
}
.table-scroll .table-body td:last-child{
border-right:none;
}
This is in order to get rid of doubled borders on the rightmost edge of the table; in RTL, the :last-child is actually on the left though, which is why status has no right border. I overrode those styles with rules like this:
.table-scroll .table-header th:last-child {
border-right:1px solid #CCC;
}
.table-scroll .table-body td:last-child {
border-right:1px solid #CCC;
}
.table-scroll .table-header th:first-child {
border-right:none;
}
.table-scroll .table-body td:first-child {
border-right:none;
}
I also got rid of the data-fixed="right" attributes. Here's a fixed fiddle: http://jsfiddle.net/xsoo79c5/5/ .

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"}); });