Im trying to delete or at least make a cell disappear in a table in HTML.
I tried to put a class on the cell i want to disappear, then, with CSS, i tried to put a "visibility: hidden;" but it doesnt worck for this particular cell.
<td class="removecell"></td>
.removecell {
visibility: hidden;
}
I expect the cell to disappear, though, nothing happend. No error message.
Here is a link to my Codepen : CodePen Link
You can use this:
<td class="removecell"></td>
.removecell {
display: none;
}
add display:none to your td
.removecell{
display:none
}
and visibility: hidden also work maybe something in your css is overriding it. try using !important
.removecell {
visibility: hidden!important;
}
<td id="removecell"></td>
<script>
//this will shortened table width
document.getElementById('removecell').style.display = "none";
document.getElementById('removecell').style.visibility= "hidden";
</script>
if you want to completly remove/delete the cell let me know but it will cost you to decrease width
Havin a table with kind of
<tr bgcolor="#aacbdd">
And I use reset.css which says
...td { background: transparent; ....
And this rule removes all backgrounds set in bgcolor attribute.
But I can't just refuse using reset.css
And I can't change HTML (there are tons of plain HTML in the site like this)
Goal is to save these bgcolor backgrounds.
I tried
.ololo tr
{
background: inherit;
}
But no use. How do I?
If you only have a few colors, you can use an attribute selector:
[bgcolor="#aacbdd"] {
background: #aacbdd;
}
[bgcolor="#c73cab"] {
background: #c73cab;
}
Here's the fiddle: http://jsfiddle.net/JN3wW/
If you have many many different colors, this can get unwieldy. I'd advise you to rely on JavaScript for that. Here's an example using jQuery:
$('tr[bgcolor]').css('background-color', function () {
return $.attr(this, 'bgcolor');
});
Here's the fiddle: http://jsfiddle.net/JN3wW/4/
You're using a CSS/Stylesheet reset, and in stylesheets, the latest definition will be used.
So try setting the style property of the tr rather than the element attribute.
<tr style="background-color:#aacbdd;">
Suppose I have the following table:
+----------+
| A | B |
+----------+
| 1 | 2 |
+----------+
I want to make so that when I hover over A that 1 gets certain css styles, ditto for B and 2. Is there a way to do this without using js?
Here's a fiddle to see what I mean
With this markup and pure CSS it's not possible because you would need to use td:hover to apply the CSS rule on mouseover, and there is no selector that lets you travel up the DOM tree (which would be necessary as you want to target cells that live in a different branch from the one being hovered).
If you can modify then a solution such as Dustin's can work; if you can use JS then it's also a matter of sprinkling a little jQuery on the table:
$("td").on("mouseenter mouseout", function() {
var $this = $(this);
$this.closest("table").find("td:nth-child(" + ($this.index() + 1) + ")")
.toggleClass("hover");
});
If you can change the markup, here's a response jsfiddle to do this with CSS.
http://jsfiddle.net/dBrd2/
Edit: Ah, but I see you replied to my comment and said you didn't want to. Anyways, just an idea if you reconsider.
you can create a class called .hover, and do like this for adding the style to all the td's with the same class
$("td.fir").bind("mouseenter", function(){
$(".fir").addClass("hover");
});
$("td.fir").bind("mouseleave", function(){
$(".fir").removeClass("hover");
});
Hi you can do as like this
Css
td {
position: relative;
border: 1px solid black;
padding: 50px;
}
tr .fir{
background:red;
}
table:hover .fir{
background:green;
}
HTML
<table>
<tr>
<td class="fir">a</td>
<td class="sec">b</td>
</tr>
<tr>
<td class="fir">1</td>
<td class="sec">2</td>
</tr>
</table>
Live Demo here http://jsfiddle.net/rohitazad/en5rB/3/
i have this line:
echo "<td class='td_show_contact_item' color='#ff0000' align='left'>".link_to($msg->getSubject(), 'messagebox/read?cursor='.$cursor,'class=link_medium_red')."</td>";
i cannot find where td_show_contact_item is defined?? i grep'd it but found nothing so i want to just override the color property as it is now the link text is blue and only when you hover over it displays red..i want the link text red please?
thank you
To find td_show_contact_item you could use FireFox FireBug plugin.
To change the color of this element, you could write it inline like:
<td class='td_show_contact_item' style='color:#FF0000 !important;' align='left'>
Or add a second class:
.td_class, .td_class a, .td_class a:visited
{
color:#FF0000 !important;
}
<td class='td_show_contact_item td_class' align='left'>
Notice !important has been added to ensure the current style is overridden.
It's best to do this via .css, since the link-color is not the same as the td color.
If it's really not defined, you can add the td_show_contact_item to your css file, and change the link-color for links within
.td_show_contact_item a {
color: #ff0000;
}
(Perhaps, add .td_show_contact_item a:visited as well)
echo "<td class='td_show_contact_item' style='color=#ff0000; text-align=left'>"
.link_to($msg->getSubject(), 'messagebox/read?cursor='.$cursor,'class=link_medium_red')."</td>";
I can't set my table row as link to something. I can use only css and html. I tried different things from div in row to something another, but still can't make it works.
You have two ways to do this:
Using javascript:
<tr onclick="document.location = 'links.html';">
Using anchors:
<tr><td>text</td><td>text</td></tr>
I made the second work using:
table tr td a {
display:block;
height:100%;
width:100%;
}
To get rid of the dead space between columns:
table tr td {
padding-left: 0;
padding-right: 0;
}
Here is a simple demo of the second example: DEMO
I made myself a custom jquery function:
Html
<tr data-href="site.com/whatever">
jQuery
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
Easy and perfect for me. Hopefully it helps you.
(I know OP want CSS and HTML only, but consider jQuery)
Edit
Agreed with Matt Kantor using data attr. Edited answer above
If you're on a browser that supports it you can use CSS to transform the <a> into a table row:
.table-row { display: table-row; }
.table-cell { display: table-cell; }
<div style="display: table;">
<a href="..." class="table-row">
<span class="table-cell">This is a TD... ish...</span>
</a>
</div>
Of course, you're limited to not putting block elements inside the <a>.
You also can't mix this in with a regular <table>
If you have to use a table, you can put a link into each table cell:
<table>
<tbody>
<tr>
<td>John Smith</td>
<td>123 Fake St</td>
<td>90210</td>
</tr>
<tr>
<td>Peter Nguyen</td>
<td>456 Elm Ave</td>
<td>90210</td>
</tr>
</tbody>
</table>
And make the links fill up the entire cells:
table tbody tr td a {
display: block;
width: 100%;
height: 100%;
}
If you are able to use <div>s instead of a table, your HTML can be a lot simpler, and you won't get "gaps" in the links, between the table cells:
<div class="myTable">
<a href="person1.html">
<span>John Smith</span>
<span>123 Fake St</span>
<span>90210</span>
</a>
<a href="person2.html">
<span>Peter Nguyen</span>
<span>456 Elm Ave</span>
<span>90210</span>
</a>
</div>
Here is the CSS that goes with the <div> method:
.myTable {
display: table;
}
.myTable a {
display: table-row;
}
.myTable a span {
display: table-cell;
padding: 2px; /* this line not really needed */
}
The usual way is to assign some JavaScript to the onClick attribute of the TR element.
If you can't use JavaScript, then you must use a trick:
Add the same link to each TD of the same row (the link must be the outermost element in the cell).
Turn links into block elements: a { display: block; width: 100%; height: 100%; }
The latter will force the link to fill the whole cell so clicking anywhere will invoke the link.
Answer from sirwilliam fits me best. I improved the Javascript with support for hotkey Ctrl + LeftClick (opens page in new tab). Event ctrlKey is used by PC's, metaKey by Mac.
Javascript
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
window.open(url, '_blank');
window.focus();
}
else if(click == 1){
window.location.href = url;
}
return true;
}
});
Example
http://jsfiddle.net/vlastislavnovak/oaqo2kgs/
You can't wrap a <td> element with an <a> tag, but you can accomplish similar functionality by using the onclick event to call a function. An example is found here, something like this function:
<script type="text/javascript">
function DoNav(url)
{
document.location.href = url;
}
</script>
And add it to your table like this:
<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
I know this question is already answered but I still don't like any solution on this page. For the people who use JQuery I made a final solution which enables you to give the table row almost the same behaviour as the <a> tag.
This is my solution:
jQuery You can add this for example to a standard included javascript file
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 1){
window.location.href = url;
}
else if(click == 2){
window.open(url, '_blank');
window.focus();
}
return true;
}
});
HTML Now you can use this on any <tr> element inside your HTML
<tr url="example.com">
<td>value</td>
<td>value</td>
<td>value</td>
<tr>
When i want simulate a <tr> with a link but respecting the html standards, I do this.
HTML:
<table>
<tr class="trLink">
<td>
Something
</td>
</tr>
</table>
CSS:
tr.trLink {
cursor: pointer;
}
tr.trLink:hover {
/*TR-HOVER-STYLES*/
}
tr.trLink a{
display: block;
height: 100%;
width: 100%;
}
tr.trLink:hover a{
/*LINK-HOVER-STYLES*/
}
In this way, when someone go with his mouse on a TR, all the row (and this links) gets the hover style and he can't see that there are multiple links.
Hope can help someone.
Fiddle HERE
This saves you having to duplicate the link in the tr - just fish it out of the first a.
$(".link-first-found").click(function() {
var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
//Style
.trlink {
color:blue;
}
.trlink:hover {
color:red;
}
<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>
Something along these lines perhaps? Though it does use JS, but that's only way to make a row (tr) clickable.
Unless you have a single cell with an anchor tag that fills the entire cell.
And then, you shouldn't be using a table anyhow.
After reading this thread and some others I came up with the following solution in javascript:
function trs_makelinks(trs) {
for (var i = 0; i < trs.length; ++i) {
if (trs[i].getAttribute("href") != undefined) {
var tr = trs[i];
tr.onclick = function () { window.location.href = this.getAttribute("href"); };
tr.onkeydown = function (e) {
var e = e || window.event;
if ((e.keyCode === 13) || (e.keyCode === 32)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
this.click();
}
};
tr.role = "button";
tr.tabIndex = 0;
tr.style.cursor = "pointer";
}
}
}
/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));
To use it put the href in tr/td/th that you desire to be clickable like: <tr href="http://stackoverflow.com">.
And make sure the script above is executed after the tr element is created (by its placement or using event handlers).
The downside is it won't totally make the TRs behave as links like with divs with display: table;, and they won't be keyboard-selectable or have status text. Edit: I made keyboard navigation work by setting onkeydown, role and tabIndex, you could remove that part if only mouse is needed. They won't show the URL in statusbar on hovering though.
You can style specifically the link TRs with "tr[href]" CSS selector.
I have another way. Especially if you need to post data using jQuery
$(document).on('click', '#tablename tbody tr', function()
{
var test="something";
$.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){
window.location.href = "http://somepage";
});
});
Set variable sets up variables in SESSIONS which the page you are going to can read and act upon.
I would really like a way of posting straight to a window location, but I do not think it is possible.
Thanks for this. You can change the hover icon by assigning a CSS class to the row like:
<tr class="pointer" onclick="document.location = 'links.html';">
and the CSS looks like:
<style>
.pointer { cursor: pointer; }
</style>
This method is here to give you a choice. Old css trick: filling the parent with position absolute.
<table>
<tr style=position:relative>
<td><a href=# style=position:absolute;inset:0></a>some
<td>cells
<td>in
<td>a row
</table>
inset:0 is a shorthand for top:0;right:0;bottom:0;left:0
we put <a> inside first <td> because this is a good chance to keep validity: only <td> can be a child of <tr>. But you can place it anywhere in the table and it will work.
Can you add an A tag to the row?
<tr><td>
</td></tr>
Is this what you're asking?