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%;
}
Related
I have applied a width of 100% to all the td in the table but only the first td of the row gets a width of 100%. while the other td collapses.
table, th, td {
border: 1px solid black;
width: 100%;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<p><b>Note:</b> The width attribute is not supported in HTML5. Use CSS instead.</p>
this style block should be like:
<style>
table{
border: 1px solid black;
width: 100%;
}
th, td {
border: 1px solid black;
}
</style>
This snippet will demonstrate how table widht works
table{
border: 1px solid black;
width: 100%;
}
td:nth-child(1),th:nth-child(1){
width: 70%
}
td:nth-child(2),th:nth-child(2){
width: 30%
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
You need to specify a relative width for the columns.
If your table is 100% width it will take the full width of the container (a div, the body)
The columns will have to fit in this width and the sum of their width must be no more than 100% (the width . If you want three columns for example you can assign a width to two of them and the third will fit in the remain space.
First column 20%, second column 30%. The third one will fit the remaining 50%.
The nth-child pseudo selector allows you to determine a specific css formatting for each column (the number in brakets is the index of the column). So in the example I have set the width of the first column as 70% of the full table and the second 30% (I could omit it since it woudl fit anyway the full width of the table)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
table, th, td {
border: 1px solid black;
}
table{
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Will depend on how the table is rendered.
The table itself have a certain width, and the cell will take a fixed or relative witdh (depending of the unit used, fixed/relative, as e.g. pixels vs percentages). When rendering the first td it takes the choosen width, 100%, and when it is going to render the second cell... there is no space to assign another 100% of width.
If the desired result is a table with colums having the same width you can get it adding table-layout: fixed; (and there are more solutions)
Search about "table rendering model" if you want to know more about all this stuff. Tables can be really tricky (evil and fun).
table{
border: 1px solid black;
width: 100%;/*this is the width of the table, as % of the 'available width' on the container*/
table-layout: fixed;
}
td {
border: 1px solid black;
width: 55%;/*does not really matters the ammount, as it is the same for all columns and its sum is 100% or more*/
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<p><b>Note:</b> The width attribute is not supported in HTML5. Use CSS instead.</p>
I'm using twitter bootstrap for a responsive design that contains a table with four columns. I want the table columns to have equal widths, so I have set td width to 25%.
I would think that the table rows would inherit their size from the table, and the table cells would then each be one quarter of that. This seems to work when the device width is 768px or greater. When the device width is smaller, the rows are sized based on the text in the largest cell, as opposed to the size of the parent table.
I have included some sample code below, with background coloring on the different elements to highlight the error (made apparent by resizing the window horizontally). The errors are highlighted in yellow (where the underlying table colour is visible).
Live example: http://pastehtml.com/view/cqrwl31z2.html
I have tested in Chrome and Safari.
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<!-- Bootstrap -->
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
td, th { width: 25% !important; }
table { background-color: yellow; }
tr { background-color: gray; }
th { background-color: aqua; }
td:nth-child(1) { background-color: red; }
td:nth-child(2) { background-color: green; }
td:nth-child(3) { background-color: blue; }
td:nth-child(4) { background-color: purple; }
</style>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<table class="span12">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<tr>
</tbody>
</table>
</div>
<div class="row">
<table class="span12">
<thead>
<tr>
<th>Longer Table</th>
<th>Headers In</th>
<th>This</th>
<th>Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
[class*="span"], .uneditable-input[class*="span"],
.row-fluid [class*="span"] {
display: table;
}
Maybe it's not a good idea to use grid classes on a table. Instead, use .span12 on a wrapper div and set the table to width: 100%.
Put a width on your table.
http://jsfiddle.net/nEeKQ/4/
table {
background-color: yellow;
width:100%;
}
Make sure any parent containers have the width set at 100%, in addition to the table having either an attribute width="100%" or style="width:100%".
When you zoom or the device width becomes greater the specified width it has no space to expand as width is given as % and not as px,so the best way to overcome this is to use
min-width:100px
for the td or th which will be the minimum width it will take even when the device width exceeds.
how do I get my link to have the same height and width as the parent tag, where the parent tags dimensions are variable?
I found this question here, where Gaurav Saxena made a post that worked at first - until I added the DOCTYPE for HTML5. If I do that, it not work in Firefox 8 anymore (it continues to work in Chrome, though).
So here is the complete example:
<!DOCTYPE html>
<head>
<style type="text/css">
.std {width: 200px; border: solid 1px green; height: 100%}
.std a {display: inline-block; height:100%; width:100%;}
.std a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td class="std">
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td class="std">
Cell 2
</td>
<td class="std">
Cell 3
</td>
<td class="std">
Cell 4
</td>
</tr>
</tbody>
</table>
</body>
Thanks in advance for your help!
$('td a').each(function(){
$(this).css({
'width': $(this).parent().width(),
'height': $(this).parent().height()
});
});
Run on document DOM load.
This doesn't work because you have a percent height of a percent height of no height. To clarify, you have height: 100%; on the link, which will rely on the parent element's (the td) height. This is also 100%, which then relies on its parent's height, which is not set. Therefore, it does not have a width work off of. A fix for this would be to set a height on either the table or the tds.
Example: http://jsfiddle.net/8rRtZ/1/
When I place an image followed by text in a table cell, the vertical alignment of the text shifts down compared to text in adjacent cells. I tried using a line-height CSS property, but it didn't seem to have an affect.
In the following example, I need "123 Description" to be flush with "cell one." Also, there is a space between the image and "123" by default. How can I adjust that - negative margins perhaps?
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
td { border: thin solid; width: 10em;}
/* .adjust-text { line-height: 1.3em; } */
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>cell one</td>
<td>
<img src="small-star.png" />
<span class="adjust-text">123 Description</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
By default, the image is aligned with the baseline of the text, which is in effect pushing the text in that cell down. To address this, specify:
td img { vertical-align: top; }
There's a good summary of CSS vertical-align here.
To remove the space... remove the space:
<img src="http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png" /><span class="adjust-text">123 Description</span>
http://jsfiddle.net/s38Uv/
To align your image with the cell, try putting the image in a css rule as a background image. Then adjust the y position of the background using background-position. Add a padding to the left of the element to display the text to the right of the image.
table { border-collapse: collapse; }
td { border: thin solid; width: 10em;}
.image {
background-image:url('http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png');
background-position: 0 -2px;
padding-left:20px;
}
<span class="image">123 Description</span>
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
td { border: thin solid; width: 10em;}
td { vertical-align: baseline;}
td img { vertical-align: middle;}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>cell one</td>
<td>
<img src="small-star.png" />
<span style="margin: 0 0 0 -5;">123 Description</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Have you tried a classic vertical-align:middle? Else put the image in it's own cell or leave the alignment at default and change the padding-bottom of all your cells will also give you the same thing.
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)