bootstrap-next-table` and I am using this table in my project around different places, and I have to override a CSS class in this and I have given my own value.
Now the problem that I am currently facing, one component needs default CSS class. I have to override this class:
.table > thead {
display: none !important;
}
Now in one file I need this:
.table > thead {
display: block;
}
How can I achieve this?
Just use a selector with higher specificity and use !important in your style declaration. Here's a plain HTML/CSS snippet that you can adapt to Raect's className attribute syntax.
.table > thead {
display: none !important;
}
.table > thead.box {
display: block !important;
}
<table class="table">
<thead>
<tr>
<th>First</th>
<th>Second</th>
</tr>
</thead>
</table>
<table class="table">
<thead class="box">
<tr>
<th>Third</th>
<th>Fourth</th>
</tr>
</thead>
</table>
I want the picture from div to be under the table so that after hover the content shows, the problem is i can't change html all elements should be the same size and be displayed as inline blocks
td {
display: block!important;
visibility: hidden
}
.hide:hover:nth-child(n)+table:nth-child(n) tbody tr td.td1 {
visibility: visible!important
}
.hide{width:100px; height:200px; display:inline-blocks;
}
tbody{width:100px; height:200px; display:inline-blocks;
}
<html>
<body>
<table>
<tbody>
<tr>
<td class="td1"></td>
<td class="td1"></td>
</tr>
</tbody>
</table>
<div id="more49042" class="hide" style="background-image:url("https://webkit.org/demos/srcset/image-src.png") !important">
</div>
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="more5343" class="hide" style="background-image:url("https://assets.crowdsurge.com/datacapture/example/img/example_logo.png") !important">
</div>
</body>
</html>
Here is what I think you are trying to do. Please note that I added the html entity to ensure that the div shows up. You could probably just set a min-height on the element.
How the CSS works:
Since there will never be a case that I can think of where hovering over something that technically doesn't exist in the DOM is going to work, you want to look for a hover on the table, and then change the visibility of the .hide element after it.
.hide {
display: none;
}
table:hover+.hide {
display: inherit !important;
}
<table>
<tbody>
<tr>
<td>Lorem.</td>
<td>Quaerat.</td>
</tr>
</tbody>
</table>
<div class="hide" style="background-image:url('//placehold.it/300x300')"> </div>
I have the following code:
<div class="main-l">
<table class="tbl">
..
</table>
</div>
I am using the following CSS to exclude tables with "main-l tbl" classes:
table:not(.main-l .views-table) {
..
}
What I noticed is the not: selector excludes all the tables with classes .views-table regardless of using '.main-l .views-table'.
How would I guarantee that only those with threaded classes such as '.main-l .views-table' are excluded, but not those with only .views-table class?
Since .tbl is a child of .main-l it doesn't work this way. The :not() selector only works for the element itself, not for parent elements.
You would have to do this:
div:not(.main-l) .tbl {
...
}
Note that using div in css should be avoided, better set a class like .tbl-container or similar.
Since .main-1 is parent element you will have to use not() on that element to exclude table that is insede it.
table {
width: 50px;
height: 50px;
border: 1px solid black;
}
*:not(.main-l) > table {
background: red;
}
<div class="main-l">
<table class="views-table"></table>
</div>
<table class="views-table"></table>
You are already referring to the table but your selector is trying to refer to a class of the outer div by using main-l.
You can use one of the following to achieve what you are after:
table:not(.views-table) {
background: teal;
}
or if you want to be more specific
div.main-l table:not(.views-table) {
background: teal;
}
.main-l table {
height: 100px;
width: 100px;
border: 1px solid black;
}
table:not(.views-table) {
background: teal;
}
div.main-l table:not(.views-table) {
background: teal;
}
<div class="main-l">
<table class="tbl">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="main-l">
<table class="views-table">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="main-l">
<table class="tbl">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
Here is the relevant code (doesn't work):
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; width: 100%; height: 100% }
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
The reason is that I want a click anywhere in the table cell to check/uncheck the checkbox.
edits:
By the way, no javascript solutions please, for accessibility reasons.
I tried using display: block; but that only works for the width, not for the height
I have only tested this in IE 6, 7, 8 and FF 3.6.3.
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
tr {
height: 1px;
}
td {
border: 1px solid #000;
height: 100%;
}
label {
display: block;
border: 1px solid #f00;
min-height: 100%; /* for the latest browsers which support min-height */
height: auto !important; /* for newer IE versions */
height: 100%; /* the only height-related attribute that IE6 does not ignore */
}
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
</table>
</body>
</html>
The main trick here is to define the height of the rows so we can use a 100% height on their children (the cells) and in turns, a 100% height on the cells' children (the labels). This way, no matter how much content there is in a cell, it will forcibly expand its parent row, and its sibling cells will follow. Since the label has a 100% height of its parent which has its height defined, it will also expand vertically.
The second and last trick (but just as important) is to use a CSS hack for the min-height attribute, as explained in the comments.
Labels are inline elements by default, so setting the width and height does nothing.
label { display: block; }
Would do it.
(However, the practice of putting the label around the checkbox it is supposed to be associated with, rather than explicitly using for, doesn't work in IE.)
The way you're applying labels doesn't make the form elements fully accessible. The label should be applied on the text associated with the form element, not just the form element. But there's nothing wrong with adding another label over the form element in order to make the entire area inside the TD clickable. This is actually desirable in order to give people with motor disabilities a bigger area to click. The <label for="whatever">Your label</label> is aimed for people who use screen readers to go through the Web form.
Also, there's nothing inaccessible about using JavaScript for enhancing accessibility. JavaScript can be used as long as it degrades gracefully and doesn't stops screen readers from reading the page. Also, there's no way to use CSS to fill the cell height on the older versions of IE (which are still in use by a big number of users) without royally screwing up the look of the page. This said, you should use jQuery to fill the entire TD. The reason I don't say JavaScript is that jQuery saves you a lot of headaches by hiding a lot of the complex coding that's necessary to make this work across the great majority of browsers.
Here's the fully cross browser accessible jQuery enabled code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Accessible Checkboxes</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table > tbody tr").each(function() { // Loop through all table rows
var Highest=0; // We want to find the highest TD... start at zero
var ThisHeight=0; // Initiate the temporary height variable (it will hold the height as an integer)
$($(this).children('td')).each(function() { // Loop through all the children TDs in order to find the highest
ThisHeight=parseInt($(this).height()); // Grab the height of the current TD
if (ThisHeight>Highest) { // Is this TD the highest?
Highest=ThisHeight; // We got a new highest value
}
});
$(this).children('td').css('height',Highest+'px'); // Set all TDs on the row to the highest TD height
});
});
</script>
<style type="text/css">
table {
border: 1px solid #000;
}
td, label {
height: 100%;
min-height: 100%;
}
th {
text-align: left;
}
td, th {
border: 1px solid #000;
}
label {
display: block;
}
</style>
</head>
<body>
<form action="whatever.shtml" method="post" enctype="multipart/form-data">
<table cellspacing="3" cellpadding="0" summary="A description of what's in the table.">
<thead>
<tr>
<th scope="col">Some column title</th>
<th scope="col">Another column title</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><label for="value1">Value 1<br />(a bit more info)</label></td>
<td><label><input id="value1" type="checkbox" /> </label></td>
</tr>
<tr>
<td scope="row"><label for="value2">Value 2</label></td>
<td><label><input id="value2" type="checkbox" /></label></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
You'll need to download jQuery and put the jquery.min.js file under a folder named js.
As you can see in the code, the form has been made fully accessible by adding a table summary, thead, th, scope, label for etc. Sure, it wasn't part of what you asked, but I added that as an extra bonus.
I did not find that the other answers worked in current browsers (2017), but absolutely positioning the label worked for me:
https://jsfiddle.net/4w75260j/5/
<html>
<head>
<style type="text/css">
td.checkbox {
position: relative;
}
td.checkbox label {
/* Take up full width/height */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Ensure the checkbox is centered */
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Checkboxes</td>
<td>Text</td>
</tr>
<tr>
<td class="checkbox"><label><input type="checkbox" /></label></td>
<td>Lorem ipsum dolor sit amet...</td>
</tr>
</table>
</body>
</html>
Note that this solution uses flexbox to center the checkbox; if you're targeting older browsers you may want to try the transform style of centering.
This code does what you want and it's tested on IE7+, FF, Google Chrome, Opera and Safari:
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td{border:1px solid #000;width:200px;height:200px;}
label{display:block;border:1px solid #f00;width:198px;height:198px;}
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
If your problem wasn't solved, hope this solves it! ;)
This answer is a bit "out there" - for it to be valid HTML you'd have to define your own DTD, and in any case it doesn't work in IE or Opera (works in Firefox). So it's not a viable solution by any measure, but I thought I'd share anyway just for interest:
The HTML:
<table>
<tr>
<td>Some content</td>
<label><input type="checkbox" /></label> <!-- no TD -->
</tr>
<tr>
<td>Some<br />multi-line<br />content</td>
<label><input type="checkbox" /></label>
</tr>
</table>
The CSS:
label { display: table-cell; }
I want a click anywhere in the table cell
<tr onclick="alert('process click here');"> ... </tr>
Try this CSS for your label
label {
border:1px solid #FF0000;
display:block;
height:35px;
}
Here is the live Demo http://jsbin.com/ehoke3/2/
In your row with "Value 1" you don't just have "a bit more info" you also include a break. It seems to me that all you really need to do is include a <br> in any label in the right column for when the content in the left column includes a <br>. Also, obviously <label> needs to have a display CSS attribute set to block.
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; display: block;}
</style>
</head>
<body>
<table>
<tr><td>Some column title</td><td>Another column title</td></tr>
<tr><td>Value 1<br>(a bit more info)</td><td><label><input type="checkbox" /> <br> </label></td></tr>
<tr><td>Value 2</td><td><label><input type="checkbox" /></label></td></tr>
</table>
</body>
</html>
One note: you're not going to get perfect workalike performance in all the major browsers from the last 10 years--cough IE6--without resorting to things like JavaScript. I believe my solution is the best solution without resorting to JavaScript.
The solution below:
has <label> which fills entirely the <td> height
supports any cell height (i.e. no fixed height in pixels)
does only on CSS (i.e. no JavaScript)
is multibrowser (MSIE 7/8/9/10/11, Firefox 42, Chrome 46, Seamonkey 2.39, Opera 33, Safari 5.1.7)
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; display:block; min-height:2.3em;}
</style>
</head>
<body>
<table style="table-layout:fixed">
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" style="vertical-align:-50%" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
Explanations:
the display:block makes the <label> to take the <td> full width
the min-height:2.3em; makes the <label> to take the <td> full height (the minimum height a little bit higher than two lines as there are two lines in the first cell of the row; you may need to increase, e.g. I use 3.3em in my code)
the vertical-align:-50% makes the checkbox to be aligned vertically at the center of the cell (this is only required if the cell content spans over less lines than the first cell of the row)
I found using display: table works for me. I tried (the previously suggested) display: table-cell and that didn't work.
td label {
display: table;
box-sizing: border-box;
width: 100%;
height: 100%;
}
I am trying to create a hierarchical display of nested tables, where each sub level is indented further from the parent. I'm open to using table or div. The closest I've come is below. It looks mostly correct in IE (except that the borders on the right are mashed together). In Chrome the sub item border is extending beyond the parent on the right.
I'm open to using divs as well.
<html>
<head>
<style type="text/css">
.ItemTable
{
width: 100%;
margin-left: 20px;
border: solid 1px #dbdce3;
}
</style>
</head>
<body>
<table class="ItemTable">
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>Item 1A</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
Looks like a couple of things. Your sub table was missing it's close tag and i added padding to the TD to help with the indent:
<style type="text/css">
.ItemTable
{
width: 100%;
border: solid 1px #dbdce3;
}
.ItemTable td
{
width: auto;
padding-left: 20px;
border: solid 1px #dbdce3;
}
</style>
<table class="ItemTable">
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
Item 1A
</td>
</tr>
</table>
</td>
</tr>
</table>
Tested it in Chrome, FF, IE6, IE7 and Safari and it looks like it works.
Do you plan on displaying tabular data? If not you would be better just using div's for this and just applying a margin to the child element like shown below
<style>
#container {border:1px solid #999}
.indent {margin-left:50px; border:1px solid #999;}
.item {background:#99cc00;}
</style>
<div id="container">
<span class="item">This is item 1</span>
<div class="indent">
<span class="item">This is item 2</span>
<div class="indent">
<span class="item">This is item 3</span>
</div>
</div>
</div>
Of course it really depends on what you are trying to display.
changing
margin-left: 20px;
to
padding-left: 20px;
works for me on IE7, firefox and chrome (although with chrome I had to un-maximise the window then remaximise it - looks like a rendering bug to me)