I need your help,
I can't seem to figure out as to why the div (bottom border) breaks onto the next page when a print preview is done in internet explorer 11:
Either way, if it can done properly, or via another method, id ideally like to get a 1px border around the page (letter-sized, 8.5inches x 11.0inches) with some margins.
Here is the HTML and CSS markup in question:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page {
margin: 0.25in;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.table td {
padding: 0;
}
</style>
</head>
<body>
<div style="border:1px solid grey; height: 100%;">
<table class="table" cellspacing="0" cellpadding="0">
<tr>
<td>File Number:</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
The problem has to do with the CSS box model. By default, borders are added to the outside of the width/height, so you need to change the box-sizing to border box, which puts the borders on the inside of the width/height:
<div style="border:1px solid grey; height: 100%; box-sizing: border-box">...
If you don't change it to border-box, the div will have a height of 100% + 2px (1px for top border, 1px for bottom border) which causes the overflow to a second page.
I have an html table that looks like this:
<table style="border-spacing: 10px">
<tr style='background-color:red'>
<td><b>Member</b></td>
<td><b>Account #</b></td>
<td><b>Site</b></td>
<td><b>Date</b></td>
</tr>
</table>
The padding in between the elements is fine, but the background color seems to only fill the TDs and leave lots of gaps because of padding/spacing. How can I make the TR background color fill the entire row, and flow through the 10px border spacing?
Use the border-collapse:collapse; to collapse the gaps and add any padding you need with:
table {
border-collapse:collapse;
}
td {
padding: 8px;
}
jsFiddle example
Apply the background on the table not on the tr:
<table style="border-spacing: 10px; background-color:red;">
<tr style=''>
<td><b>Member</b></td>
<td><b>Account #</b></td>
<td><b>Site</b></td>
<td><b>Date</b></td>
</tr>
</table>
http://jsfiddle.net/helderdarocha/C7NBy/
You can do the following things:
1)HTML+CSS
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse: separate;
/*this is by default value of border-collapse property*/
border-spacing: 0px;
/*this will remove unneccessary white space between table cells and between table cell and table border*/
}
th,td
{
background-color: red;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td><b>Member</b></td>
<td><b>Account #</b></td>
<td><b>Site</b></td>
<td><b>Date</b></td>
</tr>
</table>
</body>
</html>
Or,
2) HTML+CSS
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse: collapse;
}
th,td
{
background-color: red;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td><b>Member</b></td>
<td><b>Account #</b></td>
<td><b>Site</b></td>
<td><b>Date</b></td>
</tr>
</table>
</body>
</html>
And if you need to make all the table entries bold, you can do the following:
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse: collapse;
}
th,td
{
background-color: red;
padding: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<tr>
<td>Member</td>
<td>Account #</td>
<td>Site</td>
<td>Date</td>
</tr>
</table>
</body>
</html>
<table>
<tr><td>test</td></tr>
<tr>
<td>
<div style= height:200px;">
<div style="border:1px solid yellow; display: inline-block; width:100px">
<img src="orderedList4.png">
</div>
<div align="center" style="border:1px solid green; display: inline-block; width:650px;height:100px;">
<div>center Test Header1</div>
<div>center Test Header2</div>
</div>
<div align="right" style="border:1px solid red;display: inline-block; width:100px">REL 1.0</div>
</div>
</td>
</tr>
</table>
In the above code, the image size is 75*75 pixels.
I want to have all the three cells to have a height of 100 pixels.
I want the image to be centered and left aligned.
The middle text to centered.
Third text to centered and right aligned.
I could not make it working.
Inline styles are a nightmare to maintain, and you should generally be trying to keep presentation separate from the content. I've moved all the styles out of the actual tags, and since you're using a table and refer to each div as a cell, I'm guessing you meant to have each one an actual cell.
<style>
.product_table {
width: 850px;
}
.product_table td {
height: 100px;
border: solid 1px #000;
vertical-align: middle;
}
.product_table .image {
width: 100px;
border-color: yellow;
text-align: left;
}
.product_table .title {
/* Automatically sizes its width */
border-color: green;
text-align: center;
}
.product_table .release {
width: 100px;
border-color: red;
text-align: right;
}
</style>
<table class="product_table">
<tr>
<th colspan="3">test</th>
</tr>
<tr>
<td class="image">
<img src="orderedList4.png" />
</td>
<td class="title">
<div>center Test Header1</div>
<div>center Test Header2</div>
</td>
<td class="release">
REL 1.0
</td>
</tr>
</table>
The top row is probably a table heading though, so you should consider moving that out of the table as a h2 or whatever level it'll be used in. And make sure a table is the most appropriate element here – unless you're going to have multiple rows of whatever this item is, you might be better off just using divs without tables.
I have some markup like so:
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<tr>
</thead>
<tbody>
<tr class="main">
<td>some content</td>
<td>some content2</td>
<tr>
<tr class="more">
<td colspan="2">
<div class="more-link"><a tabindex="0" href="#">Show more info</a></div>
<div class="more-info">
more info goes here
</div>
</td>
<tr>
</tbody>
</table>
And some CSS:
td, th{
border: 1px solid red;
}
.main td{
height: 50px;
width: 300px;
vertical-align: top;
}
.main td{
border-bottom: 0;
}
.more td{
border-top: 0;
height: 0;
}
.more-link{
position: relative;
top: -30px;
}
.more-link:focus + div, .more-link:active + div{
height: auto;
}
What I want to do is that when the "show more info" link is clicked, the table row called "more" expands.
The problems:
There is no effect if I set the td inside more to have a height of 0;
If I set height of the more-info div to 0, or display:none, the table row still takes up space.
I would like to do this with just CSS, javascript can be used to make it better, but the basics should just work without javascript.
How can I get my more row to expand when the show more info link is clicked?
And a fiddle: http://jsfiddle.net/QJr2e/
Got it!
Instead of using position:relative to move the "show more info" link, I gave it a float:left. This allowed me to move it anywhere I want using margin, while reorganizing the flow.
Instead of using height, I just set more-info to display:none, and then when the "show more info" link is clicked:
.more-link:active + div, .more-link:focus + div{
display: block;
}
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%;
}