I'm trying to override a style within a javascript form from Little Green Lights.
I can override the width within Chrome inspect, but I can't duplicate the override from my style sheet.
I thought at first I wasn't being specific enough, so I tried just putting a border around the table element but it doesn't work, which implies that the css override can't affect js code.
Am I overlooking something? Can this be done?
The code I'm using to override is
table[style] {
width: 400px !important;
}
Your selector is assuming that the table has a style attribute. If it hasn't then the width won't be set by your stylesheet entry, but it could be set by some other imported stylesheet.
When you add a style direct to the element in the browser inspect tool then the table does get a style attribute.
Here's a simple example. Table 1 has no width set and Table 2 has because it had (an albeit otherwise empty) style attribute so your selector worked.
const table1 = document.querySelector('#table1');
console.log(window.getComputedStyle(table1).width);
const table2 = document.querySelector('#table2');
console.log(window.getComputedStyle(table2).width);
table[style] {
width: 400px !important;
}
<table id="table1">
</table>
<table style="" id="table2">
</table>
Your CSS selector doesn't even work. If the syntax is right and it has !important attached to it, it will override the javascript:
const table = document.querySelector('table')
table.style.backgroundColor = 'blue'
table
{
background: red !important;
}
<table>
<tr>
<td>Table cell</td>
</tr>
</table>
Good comments have been presented.
The style of your <table> element:
is an inline CSS
(style attribute of an HTML element)
hence, it overrides any internal CSS
(defined in the <head> section of an HTML page within a <style> element)
also overrides any external CSS
(linked to it in the <head> section of each HTML page)
However, JS should override all above mentioned CSS options, unless they have the !important attribute set in their CSS.
Therefore, as mentioned in comments already, we should avoid !important whenever possible.
document.querySelector('table').style.width = '200px'
Just make sure to apply above JS command after your template Little Green Lights has fully created its DOM elements (the table in this case), which does not have the !important attribute set originally according to your screen shot.
Run code snippet
function changeWidth() {
document.querySelector('table').style.width = '200px';
}
<button onclick="changeWidth()">.style.width = '200px'</button>
<table style="height: 100px; width: 100px; border: 2px solid #eee" width="559">
<tr>
<td>test</td>
</tr>
</table>
All the suggestions addressed the override, but the problem turned out to be unsolvable with css, as evidently, the lgl js execution takes place after the css overrides are implemented. I proved this by wrapping border code with html that included the lgl script. The border showed, but did not include the lgl code. I did not try the js solutions, as it ended up being easier to change the lgl code and give up on trying to manipulate it externally.
I am trying to make a whole table row clickable and have done so using javascript. However, this does not let you see the target link in the status bar and also prevents you from opening these links in new tabs.
Therefore, I have been trying the following:
<tr>
<td>#Html.ActionLink(...)</td>
<td>#Html.ActionLink(...)</td>
<td>#Html.ActionLink(...)</td>
</tr>
Then using display:block; on the anchors to make the full row clickable.
tr:hover {
background: red;
}
td a {
display: block;
border: 1px solid black;
padding: 16px;
}
However, I can no longer click the action link, wherever I click on the table row, it takes me to whatever I have in the anchor.
That leads me to my question. How can I make it so that if I click anywhere in the row, it takes me to my anchor, but if I click precisely on the action link, it takes me to where that is set.
Any help is greatly appreciated.
Someone has written a plugin for Bootstrap 3 that makes this easy to do. Jasny Bootstrap has "Row Links" which allow you do to the following:
<tbody data-link="row" class="rowlink">
<tr>
<td>First Link</td>
<td>Some text</td><td class="rowlink-skip">Action</td>
</tr>
</tbody>
where the entire row will link to #wholerow and the <a> tag will link to #
In my table, when i double click on the empty space, it's selected ( highlighted in blue ), how can i avoid this. but still i need to select the text on the rows.
i tried like this, but no use:
table{
width:100%;
}
td{
border:1px solid gray;
-webkit-user-select : text; //still empty space selected.
}
any one give some suggestion please? ( in demo click on empty space on td )
Live Demo
Here's one method...
DEMO: http://jsfiddle.net/PEdq5/2/
Add some markup (inline elements surrounding the text/cell contents)
Updated HTML
<table>
<tbody>
<tr>
<td><span class="denali-tooltip tooltip-on-truncate project-name">Mahindra</span>
</td>
<td><span>1</span>
</td>
<td><span>19</span>
</td>
</tr>
</tbody>
</table>
Then add some CSS using the ::selection pseudo-element rule that affects the default selection behaviour.
Additional CSS
td::selection {
background-color: transparent;
}
td > span::selection {
background-color: blue;
color: white;
}
Additional information on ::selection. Note that this is a non-standard feature.
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
http://caniuse.com/#search=%3A%3Aselection
Add display:block; to the span element.
Double click wont select the text anymore, just triple-click will.
Alternative JS Method
document.onselectstart = function() {return false;}
document.onmousedown = function() {return false;}
This will disable the selection of anything on the page by the mouse. It is not bulletproof in any way can easily cause you problems with the interoperability of other click functions you might be using in JS among many, many other drawbacks.
I do not condone this kind of code, but it should adequately answer the question.
I have a table that looks something like this:
+----------------------+-------------------+
| This text is on the | This text is on |
| first column | the second column |
+----------------------+-------------------+
And I want it to look like this:
+----------------------------------+-----------------------------------+
| This text is on the first column | This text is on the second column |
+----------------------------------+-----------------------------------+
My table is longer than the screen and has many many lines, but this is the functionality I want from it. Is there a CSS property that can make this happen without truncating the text? If not could somebody point me to a javascript example on how to do this?
Try the white-space property:
td { white-space: nowrap; }
If you need wider browser support than white-space: nowrap you can use a pre tag. The css solution is nicer though so only use pre if you really have to:
<tr>
<td><pre>This is my non wrapping text</pre></td>
<td><pre>Some more non wrapping text</pre></td>
</tr>
Obviously this will only work for simple html in your table cells, plus pre generally comes with it's own default styling which you can get around with the following in CSS:
td pre {
font-family: inherit;
font-size: inherit;
/* ... and so on */
}
Using inherit can be slightly less supported, so if you can it is best to actually define the style you want directly.
Try:
<table>
<tr>
<td nowrap>Look ma</td>
</tr>
</table>
I wonder what the best way to make an entire tr clickable would be?
The most common (and only?) solution seems to be using JavaScript, by using onclick="javascript:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).
While that works, it is a pity that the target URL is not visible in the status bar of a browser, unlike normal links.
So I just wonder if there is any room for optimization? Is it possible to display the URL that will be navigated to in the status bar of the browser? Or is there even a non-JavaScript way to make a tr clickable?
If you don't want to use javascript, you can do what Chris Porter suggested by wrapping each td element's content in matching anchor tags. Then set the anchor tags to display: block and set the height and line-height to be the same as the td's height. You should then find that the td's touch seamlessly and the effect is that the whole row is clickable. Watch out for padding on the td, which will cause gaps in the clickable area. Instead, apply padding to the anchor tags as it will form part of the clickable area if you do that.
I also like to set the row up to have a highlight effect by applying a different background color on tr:hover.
Example
For the latest Bootstrap (version 3.0.2), here's some quick CSS to show how this can be done:
table.row-clickable tbody tr td {
padding: 0;
}
table.row-clickable tbody tr td a {
display: block;
padding: 8px;
}
Here's a sample table to work with:
<table class="table table-hover row-clickable">
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
Here's an example showing this in action.
With jQuery you can do something along these lines:
$('tr').click(function () {
$(this).toggleClass('highlight_row');
});
Then add a highlight_row to your CSS file and that row will change its class to highlight_row. You could swap out whatever you want to do in that line (as well as change $('tr') to fit your specific row.
I have found this solution which works quite well:
$(document).ready(function() {
$('#example tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
Just don't forget to style the cursor as a pointer on tr:hover
#table tr:hover {cursor: pointer;}
Source: http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/
"
The most common (and only?) solution seems to be using JavaScript, by using onclick="javascript:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).
"
The onclick-command should look like this:
onclick="window.location.href='bla.html';"
And it isn't necessary to do anything onmouseover/-out about the cursor as a cursor-property only works when the mouse is hovering the element:
style="cursor:pointer;"
Another approach is to actually linkify the contents of each cell. You could change the style if necessary so they don't look like traditional links.
Note that what you are trying to do does break the intuitive user experience a little bit. It needs to be clear that clicking on a row does something. I usually prefer to put an icon at the edge of each row (a magnifying glass, etc.) which drills into a new page.
Fortunately or unfortunately, most modern browsers do not let you control the status bar anymore (it was possible and popular back in the day) because of fraudulent intentions.
Your better bet would be a title attribute or a javascript tooltip.
If your table does not have links inside, following trick should work.
Put entire table into a link and change the href attribute of the link in rows onmouseover events.
Demo code:
<script type="text/javascript">
function setLink(elRow) {
var elLink = document.getElementById('link');
elLink.href = elRow.rowIndex + ".com";
}
</script>
...
<a id=link>
<table>
<tr onMouseOver="setLink(this);"><td>first row</td></tr>
<tr onMouseOver="setLink(this);"><td>second row</td></tr>
</table>
</a>
I realise this is an old thread with a perfectly legit solution in Alice's answer. There is however also a way to do this without javascript AND without duplicating your link * the number of columns AND keeping your markup/CSS valid. It took me a while to figure out, so I thought I'd post it here for others that also happen to end up on this thread like I did.
Put the link in the first column:
<table class="search_results">
<tr>
<td>Some text</td>
<td>more text</td>
<td>more text</td>
</tr>
</table>
This is perfectly fine markup, so your only real issue is getting that link to span the width of your table. I did it like this using pretty standard CSS:
table.search_results a {position:absolute;display:block;width:98%;}
Change the width to whatever you want and in principle you are done and dusted. So that is all relatively easy, however if you, like me, have a fluid/responsive layout, and also some standard styling on your links plus some padding on your tables, you are going to need these rules (copied necessary from above and added extra).
table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}
To explain:
The first rule removes all padding on my first td ONLY. By default the padding on my td is .5em.
The second rule adds the same padding back on the link, otherwise you end up with misaligned cell contents. It also corrects a few standard styles I have on my a to ensure the columns all look the same. You could do this the other way around too (add the link styles to your td).
With the last two rules I get rid of the default hover effect on my links, then put it on the tr for any tables with the right class.
This works in the browsers I care about, but you should of course test in those you care about :) Hope I help save someone some minutes with this writeup!
It's a hack but you can add this to your tr:
onmouseover="window.status='http://bla.com/bla.htm'"
don't forget to style your fake links:
tr.clickable {
cursor: hand;
cursor: pointer;
}
You might also try wrapping the content of your row's cells in an href and using CSS to push the href height/width to the internal bounds of each cell. The row itself wouldn't be clickable (unless you added additional html to the row) but most of the content space of the row would act like a normal link (cursor, status bar, etc). I can't remember off hand exactly how I did this before but I was reasonably successful getting this to work.
Edit: A comment asked for more details and they were covered by a later post from another user but I didn't realize that until I looked further into this suggestion and tested it.
If you add "display: block" CSS style tag to the anchor objects in the cells that you want to be clickable it will make the entire cell (minus any padding) act like a button. The cursor is displayed correctly and it previews the link destination in the status bar. This is all done with zero javascript. Good luck.
I had that same problem, I solved it by using CSS only. I think it was the best solution for me, because I was using it in JSF also.
Just assign the style class to the table and you are good to go....
Here it goes:
CSS:
.myDataTable {
background: 444;
width: 100%;
}
.myDataTable thead tr {
background-image: url('../img/tableHeader.jpg');
}
.myDataTable thead tr th {
height: 28px;
font-size: 14px;
font-family: tahoma, helvetica, arial, sans-serif;
padding-left: 5px;
}
.myDataTable thead tr th img {
padding-right: 5px;
padding-top: 1px;
}
.myDataTable thead tr td {
height: 15px;
font-size: 11px;
font-weight: bold;
font-family: tahoma, helvetica, arial, sans-serif;
padding-left: 5px;
}
.myDataTable tbody {
background: #f2f5f9;
}
.myDataTable tbody tr:nth-child(even) td,tbody tr.even td {
background: #e2ebf4;
font-size: 12px;
padding-left: 5px;
height: 14px;
}
.myDataTable tbody tr:nth-child(odd) td,tbody tr.odd td {
background: #f7faff;
font-size: 12px;
padding-left: 5px;
height: 14px;
}
.myDataTable tbody tr:hover td {
background-color: #e7e7e7;
}
.myDataTable tbody tr td {
height: 14px;
padding-left: 5px;
font-size: 12px;
}
.myDataTable tbody tr td a {
color: black;
text-decoration: none;
font-size: 12px;
display: block;
}
.myDataTable thead tr th a {
color: black;
text-decoration: none;
font-size: 12px;
display: inline;
}
Your table structure should be:
<table class="myDataTable">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1 </td>
<td>Data 2 </td>
</tr>
</tbody>
</table>
If your targeted browsers all support CSS Table display styles, you can use Javascript to wrap each row in an <a> tag styled to function as a <tbody>.
Here's some JS code using jQuery to make it happen: (jsfiddle)
$(function() {
$('.table-linked').each(function() {
var table, tbody;
table = this;
tbody = $('tbody', this);
tbody.children().each(function() {
var href, row;
row = $(this);
href = row.attr('data-href');
$('<a href="' + href + '" style="display: table-row-group" />').append(row).appendTo(table);
});
tbody.remove();
});
});
This code will transform a table that looks like this:
<table class="table-linked">
<tbody>
<tr data-href="/a"><td>a</td><td>1</td></tr>
<tr data-href="/b"><td>b</td><td>2</td></tr>
</tbody>
</table>
Into this DOM structure in the browser:
<table>
<a href="/a" style="display: table-row-group">
<tr><td>a</td><td>1</td></tr>
</a>
<a href="/b" style="display: table-row-group">
<tr><td>b</td><td>1</td></tr>
</a>
</table>
Browsers don't seem to be capable of parsing this structure as HTML code (and needless to say it won't validate), it needs to be constructed using JS
Marko Dugonjic, in his blog maratz.com, explained how you detect a table row index with Javascript. In his example, when you mouse over any cell in a row, the entire row is highlighted.
See example,
http://webdesign.maratz.com/lab/row_index/
and his article,
http://www.maratz.com/blog/archives/2005/05/18/detect-table-row-index-with-javascript/
With a change, you can adapt this further by placing an onclick action.
If you're already relying on javascript for the click, then you can also use javascript to show the url in status area, change the cursor, or do other things so it looks more like a link. Of course, the browser may ignore the code that sets the status area.