I have the current following table:
<table border="1">
<tr>
<td></td>
<td>Banana</td>
<td>Orange</td>
<td>Plum</td>
</tr>
<tr>
<td>Banana</td>
<td>1:1</td>
<td>1:2</td>
<td>1:3</td>
</tr>
<tr>
<td>Orange</td>
<td>2:1</td>
<td>1:1</td>
<td>1,5:1</td>
</tr>
<tr>
<td>Plum</td>
<td>1:3</td>
<td>2:1</td>
<td>1:1</td>
</tr>
I am looking to cause a trigger when I am mousing over the cell dividers , AS indicated bellow. This needs to be done in either HTML/CSS/jss. I can easily figure out a hover for the table or for the individual cells, but how could I get something to trigger when hovering over the cell dividers? (see following image)
tr td{
position:relative;
}
tr td::after{
position:absolute;
right:-2px;
width:4px;
cursor:pointer;
top:0px;
height:100%;
z-index:1;
}
tr td::nth-last-of-type::after{
display:none;
}
Now you can trigger anything by selecting 'tr td::after' as a selector
Also, width and right can be changed according to your border/padding of the cells.
Related
I have this short piece of code that allows for sections of a table to be collapsed (they are like collapsible headers). This is neat, but I'm trying to make for the inverse to happen upon loading the page -- to be collapsed by default on load, but expandable when clicked. How would I go about doing this?
My present code, shown below, also features sections that only collapse when the words in the section are clicked, not when the section itself (outside of the words) are clicked. This is because I used labels to make the collapsible. Is there a way to make the entire row expandable/collapsible?
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="2">
<label for="section">Click me!</label>
<input type="checkbox" id="section" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td>100</td>
</tr>
<tr>
<td>Jill</td>
<td>300</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
</script>
I'm trying to make for the inverse to happen upon loading the page --
to be collapsed by default on load, but expandable when clicked. How
would I go about doing this?
Simply add a line in your jquery above your toggle function and call on your .hide class selector and use .hide(); Then when you click it the toggle function fires.
also features sections that only collapse when the words in the
section are clicked, not when the section itself (outside of the
words) are clicked. This is because I used labels to make the
collapsible. Is there a way to make the entire row
expandable/collapsible?
Yes... Make your label display as block in your CSS file...
label {
display: block;
}
$(document).ready(function() {
$('.hide').hide();
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="2">
<label for="section">Click me!</label>
<input type="checkbox" id="section" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td>100</td>
</tr>
<tr>
<td>Jill</td>
<td>300</td>
</tr>
</tbody>
</table>
Several things going on here...
You were hiding your checkbox, which I don't think was your intent.
Check this example, where I fixed some things: https://jsfiddle.net/za73qf65/
Fixes include:
changing the name of your "hide" class to "hidable"
defaulting that "hidable" class to be display:none
unhiding your checkbox
changing your change() event handler to a click() (optional)
attaching your event handler to a button with an ID (you can vary that)
Point is, with my changes, your example works. You might want to tweak it for a more specific need.
I have a table with a thead and tbody sections. I have applied a slideToggle on this successfully, but the animation is broken.
When a user clicks on the thead, I want the contents of the tbody to slide up. Currently what happens is the section simply disappears, without any animation.
Here is the table
<table>
<thead>
<tr>
<td colspan="3">TABLE HEADING</td>
</tr>
</thead>
<tbody>
<tr>
<td class="first" colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
</tr>
</tbody>
</table>
And here is the jQuery I am using:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("thead").click(function () {
$(this).next("tbody").slideToggle("slow");
}
)
});
</script>
It disappears because <tbody> normally will get no shorter than the tallest td, no matter what you set its height to with CSS.
This is why the natural-height tbody just seems to disappear, while the one with artificial extra-height appears to run until the tr reached its natural height.
You can kludge around this with tbody {display:block;}. See the kludge at jsFiddle.
But, notice the effect that has when a table height is set.
Probably, the best way is to wrap the whole table in a div and slideToggle that, like so:
<table class="AbbyNormal">
<thead><tr><td colspan="3">TABLE HEADING</td></tr></thead>
</table>
<div class="tableWrap">
<table class="AbbyNormal">
<tbody>
<tr>
<td class="first" colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
</tr>
</tbody>
</table>
</div>
Just be sure and fix the table widths the same.
See it in action at jsFiddle.
I think you should set an height to the tbody to make it work, look at this fiddle: http://jsfiddle.net/nicolapeluchetti/AsDvb/
css:
tbody{
height: 1000px;
background-color: yellow;
}
For example I have this code:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td>$100</td>
</tr>
<tr>
<th>Initial value</th>
<td class="results"></td>
</tr>
</table>
Is there a way to hide the cells that are equal to $0 using HTML/CSS only?
Let's say instead of $0 I have a variable called fee that can be a variety of values: $0, $20, $100, etc.
For example:
<script>
var fees = ["$0", "$20", "$100"];
document.querySelector('.results').innerHTML = fees[1];
</script>
Is there a way to check what value it is and if it is found to be $0 can I then hide it?
My CSS is:
table{
border-width: 1px;
border-style: solid;
border-collapse: separate;
width: 400px;
}
#test{
empty-cells: show;
margin-bottom: 20px;
}
tr, th, td{
border-width:1px;
border-style: solid;
}
.results {
display: none; // I want this to only display none when fees = $0
}
TL;DR: It's possible. Look for the last solution in my answer, or check this blog:
Conditional formatting with pure css
I am assuming you do not want to hide the cell, but only its value. Hiding a cell does not make sense in a table since it would potentially change the layout, also any cell borders etc would also be hidden - probably not what you want.
Now CSS does not have any selectors based on element text content. But it does support attribute value selectors. So, you could change your code to be:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td><input value="$100"/></td>
</tr>
<tr>
<th>Initial value</th>
<td><input value="$0"/></td>
</tr>
</table>
And use a rule like
input[value="$0"] {
display: none;
}
You could even make the inputs not behave like inputs by adding a disabled attribute so they aren't editable.
If you don't want to use input elements, you could consider using spans instead and use a "data-value" attribute, and try if browsers respect that:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td><span data-value="$100">$100</span></td>
</tr>
<tr>
<th>Initial value</th>
<td ><span data-value="$0">$0</span></td>
</tr>
</table>
The css woudl be:
td > span[data-value="$0"] {
display: none;
}
Of course the drawback of this is that you would have to add the value twice (once as text content, once as attribute), and you need to generate an inner span element which feels a bit ugly.
Alternatively you could try to add a class attribute that includes the value and create a class selector:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td ><span class="value100">$100</span></td>
</tr>
<tr>
<th>Initial value</th>
<td ><span class="value0">$0</span></td>
</tr>
</table>
and the css would be:
td span.value0 {
display: none;
}
Of course the drawbacks are the same as with the previous method - you have to generate the value twice, once as text content and once as classname, and you need to add the inner span.
EDIT: dollar char is not valid in css classnames, so I removed it.
EDIT2: It turns out there is a way to do it without duplicating the value as both text and attribute. As a bonus, it turns out you don't need the inner span either if we rely on the :after pseudoclass (since it is that class that gets hidden, not the cell itself):
<table border="1">
<caption>Test</caption>
<tr>
<th>Values</th>
<td data-value="$100"></td>
</tr>
<tr>
<th>Initial value</th>
<td data-value="$0"></td>
</tr>
</table>
Using this css:
td:after {
content: attr(data-value);
}
td[data-value="$0"]:after {
content: "";
}
I've looked around a bit and can't seem to find a decent solution, that doesn't require some crazy JavaScript, to the following problem.
There are two separate tables in the example. The first one is just for the headers. The second is for the body. We need two tables because the requirement for this feature is that the body table be locally scrollable, meaning the headers need to remain visible as the table body scrolls. We cannot use any new fancy HTML 5 pivot tables because we have to support IE.
Is there a way to accomplish this with pure CSS? It doesn't have to be perfect, just as long as it looks decent that's all I need.
This is a sample of the concept, using Jquery. (You can do it vanilla, but requires more code)
<table id="tb1" border="1">
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
<td>Title 4</td>
</tr>
</table>
<table id="tb2" border="1">
<tr>
<td>Content 00001</td>
<td>Content 02</td>
<td>Content 0000000000003</td>
<td>Content 000000000000000000004</td>
</tr>
</table>
JS:
function SetSize() {
var i = 0;
$("#tb2 tr").first().find("td").each(function() {
$($("#tb1 tr").first().find("td")[i]).width(
$(this).width()
);
i++;
});
}
$(window).resize(SetSize);
SetSize();
No "crazy javascript" :D
Here's a working fiddle, with a few css to make it look better: http://jsfiddle.net/5mfVT/
Definitely doable in just CSS. Just set widths on both tables, trs, and tds, apply word-wrapping, and setting table-layout to fixed. This last setting makes it use the defined column widths, rather than be determined by the cell content's width.
#tb1 { width: 80%; }
#tb2 { width: 80%; }
#tb1 tr { width: 100%; }
#tb2 tr { width: 100%; }
.col1 { width: 35%; }
.col2 { width: 35%; }
.col3 { width: 20%; }
.col4 { width: 10%; }
#tb1, #tb2 { table-layout: fixed; }
#tb1 td, #tb2 td { word-wrap: break-word; }
<table id="tb1" border="1">
<tr>
<td class="col1">Title 1</td>
<td class="col2">Title 2</td>
<td class="col3">Title 3</td>
<td class="col4">Title 4</td>
</tr>
</table>
<table id="tb2" border="1">
<tr>
<td class="col1">Content 00001</td>
<td class="col2">Content 02</td>
<td class="col3">Content 0000000000003</td>
<td class="col4">Content 000000000000000000004</td>
</tr>
</table>
Tables resize to as small as possible. Your headers' table has narrower content and can therefore resize to smaller widths before seizing to resize.
A non-Javascript solution is to either define widths for all of your columns or to define a min-width property your tables that fits the larger of the two minimal widths.
Good day programmers,
Being an amateur, I hunted around and found someone who created a very nice jQuery drop-down table. I found a terrific one...
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
And the CSS...
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:left;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#222222 url(header_bkg.png) repeat-x scroll center left; color:#FFF; padding:3px 8px; text-align:center;}
#report td { background:#111111 none repeat-x scroll top left; color:#000; padding:3px 8px; text-align:center;}
#report tr.odd td { background:#000000 url(row_bkg.png) repeat-x scroll center left; cursor:pointer;}
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
By itself, it works just fine... you can see the gaming page I use it on at the following link:
http://www.mynextbit.com/Pages/Wreckedified/roster.html
I'm trying to figure out a way to make it to where I could drop down maybe 12 or so rows instead of just one to show a bunch of data about one of those characters in the table. I did some digging and thought I could re-write the jQuery using the
nth-child(12n+0)
But couldn't quite pull it off. Am I on the right track at least or is there a more obvious and simple solution?
Have you considered that it might be possible to simply start a new table within your rows so you can keep the existing functionality?
Right now your HTML looks a bit like this:
<table>
<thead>
<th>Character</th><th>iLevel</th><th>And your other columns...</th>
</thead>
<tbody>
<tr>
<td>CharacterName (Build)</td><td>559</td><td>other column data...</td>
</tr>
<tr>
<td>This is your hidden data row</td>
</tr>
</tbody>
</table>
Instead of trying to alter the script so that it hides/shows the next 12 <tr> tags you could just create a new table inside your hidden data row...
<table>
<thead>
<th>Character</th><th>iLevel</th><th>And your other columns...</th>
</thead>
<tbody>
<tr>
<td>CharacterName (Build)</td><td>559</td><td>other column data...</td>
</tr>
<tr>
<td>
<table>
<tr><td>Hidden data row 1</td></tr>
<tr><td>Hidden data row 2</td></tr>
<tr><td>Hidden data row 3</td></tr>
<tr><td>Hidden data row 4</td></tr>
<tr><td>Hidden data row 5</td></tr>
<tr><td>Hidden data row 6</td></tr>
<tr><td>Hidden data row 7</td></tr>
<tr><td>Hidden data row 8</td></tr>
<tr><td>Hidden data row 9</td></tr>
<tr><td>Hidden data row 10</td></tr>
<tr><td>Hidden data row 11</td></tr>
<tr><td>Hidden data row 12</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
But table are "oldschool" so if you draw a picture of what you want to display we might be able to give you some alternative ways too.