We Keep Coding

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

convert rows of html table into bootstrap cards

I have html table with rows like below:
<table id="tb" class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>title</th>
<th>price</th>
<th>discount</th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>PRODUCT 1</td>
<td align="right">24.43</td>
<td align="right">53</td>
<td>https://images-na.ssl-images-amazon.com/images/I/81xV%2BD1OkGL._AC_SL1500_.jpg</td>
</tr>
<tr>
<td>PRODUCT 2</td>
<td align="right">50.27</td>
<td align="right">70</td>
<td>https://images-na.ssl-images-amazon.com/images/I/61d-BO4sARL._AC_SL1500_.jpg</td>
</tr>
<!-- ... many other rows -->
<!-- I added this script to put the image link inside src -->
<script>
$('#tb td:nth-child(4n)').each((i, el) => {
$(el).wrapInner(`<img src="${el.innerText}" class="img-fluid"/>`);
});
</script>
I want to convert each row to a bootstrap card
I tried to give each the bootstrap class class="card" using jquery:
$('#tb tr').addClass("card")
it didn't worked, returns each row on top of each other
I want results like this:

It's pretty hard to take HTML code and use javascript to convert that into some other complicated format. If you want to do everything manually, you can make the cards by hand with HTML. However, I suggest using a database and PHP to programmatically create those cards or tables with the data in the database.
Here is some information about how to create those Bootstrap cards: https://getbootstrap.com/docs/4.0/components/card/
Here is some information about how to use databases and PHP to create those cards automatically: https://www.phpzag.com/create-bootstrap-cards-with-php-and-mysql/

The thing which you are trying to achieve makes no sense. I myself came across this dilemma of converting a table into a card but after some quick search I got to know, this makes no sense.
Think of it like transformers. Table and card are two different transformers and they cannot be converted into each other until and unless we you brute force.

You can convert the table into cards. I have done this in the WordPress admin tables. Though I have not done it into bootstrap.
Here is a way to do with straight CSS.
First remove the table header and footer (if you have one).
thead, tfoot {
display: none;
}
Then remove the background of the table
table {
background: none !important;
border: none !important;
}
Change your rows so that they display as a card:
make them inline-block so they will appear on the same row but as a full container
add a background, border, padding and shadow to style it
tr {
display: inline-block;
padding: 1rem 0.5rem 1rem 0.5rem;
margin: 1.5rem;
border: 1px solid grey;
border-radius 10px;
box-shadow: 0 0 10px;
}
Make the cells appear on their own rows
td {
display: block;
}
If you want to add labels to the cell data you can use ::before and use a specific CSS attribute selector. For example, in my WordPress admin tables the column names are added to each cell with the attribute "data-colname".
td[data-colname="Guardian"]::before {
content: "Guardian :";
}
Here is an example of my WordPress table as cards:
(And as you can imagine, you can't easily alter a WordPress admin table -- you work with what you get).

Don't need to write single line of CSS code for hide thead or tfoot. first you need to know about replaceWith() method in jQuery & replace() method in JavaScript. So just pull the table contents as a string and run a simple string replace. And add Bootstrap classes as you want for card design.
Helpful Links
https://stackoverflow.com/a/9230045/7052927
https://api.jquery.com/replacewith/
https://www.w3schools.com/jsref/jsref_replace.asp
$(document).ready(function () {
$("#tb thead, #tb tfoot").remove(); //Remove element
$("#tb").find('td').removeAttr("align"); // Remove attribute
$('#tb').replaceWith($('#tb').html()
.replace(/<tbody/gi, "<div id='tb' class='row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3' ")
.replace(/<tr/gi, "<div class='col'> <div class='card'> <div class='card-body text-center' ")
.replace(/<\/tr>/gi, "</div></div></div>")
.replace(/<td/gi, "<div")
.replace(/<\/td>/gi, "</div>")
.replace(/<\/tbody/gi, "<\/div")
);
// each loop for card layout
$("#tb .card").each(function() {
$(this).find('.card-body div:first-child').addClass('h6 fw-bold text-primary'); // Change product style
var imgPath = $(this).find('.card-body div:last-child');
$(this).find('.card-body').before(`
<div class="ratio ratio-4x3">
<img src="`+ imgPath.text()+`" class="card-img-top1 p-2 w-auto mx-auto start-0 end-0" alt="...">
</div>
`);
imgPath.remove() // After pick text then remove
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container py-3">
<table id="tb" class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>title</th>
<th>price</th>
<th>discount</th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>PRODUCT 1</td>
<td align="right">24.43</td>
<td align="right">53</td>
<td>https://images-na.ssl-images-amazon.com/images/I/81xV%2BD1OkGL._AC_SL1500_.jpg</td>
</tr>
<tr>
<td>PRODUCT 2</td>
<td align="right">50.27</td>
<td align="right">70</td>
<td>https://images-na.ssl-images-amazon.com/images/I/61d-BO4sARL._AC_SL1500_.jpg</td>
</tr>
</tbody>
</table>
</div>

How to dynamically modify CSS class using Javascript / jQuery with wrapper?

I have an existing html code of table.
eg.
<div class="content-entry">
<table class="old-style" border="3">
<tr align="middle">
<td style="font-weight:bold"></td>
</tr>
</table>
</div>
I would like to conditionally remove all attributes/classes of the current table with the injection of a wrapper <div> and apply css class style to override the existing table behavior using Javascript / jQuery.
conten-entry might have multiple table blocks, and I would like to apply the same style change to all of them.
to:
<div class="content-entry">
<div class="responsive-table">
<table class="table table-bordered table-condensed">
<tr>
<td></td>
</tr>
</table>
</div>
</div>
How can I do this without changing the original html code?

Use .wrap, wraps an HTML structure around each element in the set of matched elements
$('.old-style').wrap('<div class="responsive-table"></div>').removeClass().addClass('table table-bordered table-condensed');
.responsive-table {
color: red;
}
.table {
font-weight: bold;
}
.table-bordered {
border: 2px solid black;
}
.table-condensed>tbody>tr>td,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>td,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>thead>tr>th {
padding: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="content-entry">
<table class="old-style">
<tr>
<td>Hello</td>
</tr>
</table>
</div>
Note: Calling .removeClass with no arguments will remove all of the item's classes.

slideToggle() and Table tag with unknown height

I am trying to slideToggle() a table with no set height. Is this possible?
<div class="container">
<h3>Title</h3>
<p class="expand-close">Expand/Close</p>
<table>
<tbody>
<tr>
<td>Head 1</td>
<td>Stuff</td>
</tr>
<tr>
<td>Head 2</td>
<td>More stuff</td>
</tr>
</tbody>
</table>
</div>
And my jQuery:
$("p.expand-close").parent().click(function (event) {
$(this).parent().find("table").slideToggle(400);
event.preventDefault();
});
And the CSS:
table {display: none;}
There's no slide animation which I am assuming is because no height is set on the table? If so, is there a way to do the slide animation?
Here's a fiddle:
http://jsfiddle.net/BRuvf/

slideToggle adds display: table property to your table, as it's not block element, you don't see the animation effect. You can put your table within a div tag and slide that instead:
<div id='table'>
<table>
// ..
</table>
</div>
#table {
display: none;
}
$("p.expand-close a").click(function (event) {
$(this).parent().next().slideToggle(400);
event.preventDefault();
});
http://jsfiddle.net/NrkCg/

This solve your problem
CSS
table{
display:block;
}
.container table{
display: none;
}
jQuery
$("p.expand-close").parent().click(function (event) {
var block = $(this).parent().find("table");
if(block.is(':visible'))
$(block).slideUp(400);
else
$(block).slideDown(400, function(){$(this).css('display', 'block')});
event.preventDefault();
});​
http://jsfiddle.net/2G2mD/

CSS horizontal table cell spacing: how?

Hopefully this is an easy one but I have not found a solution. I want to put space between columns on a table.
Example
| Cell |<- space ->| Cell |<- space ->| Cell |
An important point is that I do not want space on the edges. There is a border-spacing property but it is not supported in IE (6 or 7) so that is no good. It also puts space at the edges.
The best I have come up with is to put padded-right: 10px on my table cells and add a class to the last one to remove the padding. This is less than ideal because the extra space is part of the cell not outside it. I guess you could do the same thing with a transparent border?
I also tried using jQuery:
$(function() {
$("table > tbody > tr:not(:last-child").addClass("right-padding");
});
but even on tables that are only ~100 rows in size this was taking 200-400ms in some cases, which is too slow.
Any help appreciated.
Thanks
To those suggesting columns they do not work. Try this:
<html>
<head>
<title>Layout</title>
<style type="text/css">
table { border: 1px solid black; }
td { background: yellow; }
</style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

How about giving each table cell a transparent border? I am pretty sure this will do it for you...
table td {
border:solid 5x transparent;
}
And you can only apply it horizontally like so...
table td {
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
Here's a complete working demo of what I believe you are trying to accomplish...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">
table {
border: 1px solid black;
}
table td {
background: yellow;
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
I do not believe IE6 supports the CSS :first-child, so here is a workaround for that...
<!–-[if IE 6]>
<style type="text/css">
table td {
border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
}
</style>
<![endif]-->

It is may be what are you loking for:
You can use two values: the first is the horizontal cellspacing, the second the vertical one.
<table style="border-spacing: 40px 10px;">

try using cols
example
<table>
<col style="padding-right:20px;" />
<col style="padding-right:30px;" />
<col />
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
cols also support classes :)
hope this helps
Darko
EDIT: To clarify a col is an element declared at the top of the table to influence entire columns. The first col element will influence the first column, the second col = second column and so on. They can be grouped in colgroups if you wish to assign the same style to more than one column.
EDIT2: After some more research it turns out that the only reliable styles you can set on a col element are:
border
background
width
visibility
No margin or padding. Bugger! Would setting the width of the columns explicitly solve your problem?

You could also consider using a series of fixed width divs floated left with margins. This might give you a bit more control over the element styling.
.row div {
margin-right: 10px;
float: left;
width: 50px;
}
<div class="row">
<div>Cell One</div>
<div>Cell Two</div>
<div>Cell Three</div>
</div>

Josh's answer doesn't work if you already have borders around your cells, like me.
I solved the problem by shifting the whole table slightly to the left, using "position: relative; left: -10px". I combined this with cellspacing on the table.
<div id='sandbox'>
<table cellspacing='10'>
<tr>
<td class='smoothBox'>
...
</td>
<td class='smoothBox'>
...
</td>
</tr>
</table>
</div>
and the css:
#sandbox {
float: left;
position: relative; /* move the whole sandbox */
left: -11px; /* slightly to the left */
width: 950px;
margin-top: 0px;
padding: 1px;
text-align: left;
}
#sandbox table {
float: left;
width: 100%;
}
#sandbox td {
width: 300px;
vertical-align: top;
}
This is what works for me, I hope it may help you too.

Did you try using col grouping?
<table>
<colgroup>
<col class="right-padding" />
<col class="right-padding" />
<col />
</colgroup>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>

It is work for me
border-collapse: separate;
border-spacing: 0px 3px;

What about just adding an empty cell that works as a spacer? You could use the col-tag as stated above to give the empty cells a certain width
<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
<td>Data</td>
<td>& nbsp;</td>
<td>Data</td>
<td>& nbsp;</td>
<td>Data</td>
</tr>
Or if you want to do more with them, just add classes to them instead of usin inline styling...

The Josh's answer is quite good, but in my opinion needlessly complicated. When you set the table borders to "hidden" and collapse mode to "collapse", the borders on the outer edges of columns will be eliminated, just as required.
Working example:
Stylesheet:
table#my_table {
border-collapse: collapse;
border-style: hidden;
}
table#my_table td {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
HTML:
<table id="my_table">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>