I want to make a grid of around 50 columns and 50 rows with height and width of each cell to be 10px.
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
td{width:10px;}
tr{height:10px;}
</style>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
I can do this by writing the code a hundred times..
But I think there should be some more practical way of doing this by css..
Can anyone help...
I'm not sure if you can do it in css, but you can certainly do it with javascript:
<style>
td {
width: 10px;
border: 1px solid black;
}
tr {
height: 10px;
}
</style>
<script>
function makeCells() {
var t = document.createElement("TABLE");
for (var rows = 0; rows < 50; rows++) {
var newRow = document.createElement("TR");
console.log(newRow);
t.appendChild(newRow);
for (var cols = 0; cols < 50; cols++) {
var newCell = document.createElement("TD");
newRow.appendChild(newCell);
}
}
document.body.appendChild(t);
}
makeCells();
</script>
This is all you need:
td {
width:10px;
height:10px;
}
However, using a table you can't be sure the width will be always 10px for each cell, because if the window's width is less than the table width, the cells will shrink by default.
<!DOCTYPE html>
<html>
<head>
<style>
table{ border-collapse:collapse; }
table,th, td{ border: 1px solid black; }
td{width:10px;}
tr{height:10px;}
</style>
</head>
<body>
<table border="1">
<?php for($ctr=0; $ctr<=50; $ctr++){ ?>
<tr>
<?php for($ctr2=0; $ctr2<=50; $ctr2++){ ?>
<td></td>
<?php }?>
</tr>
<?php }?>
</table>
</body>
</html>
just a try
As an alternative to the other, working answers, you could try something like this.
What I've done is created 2500 <div>s with javascript, then gave them a padding of 1% in a 500px container. 1% of 500 is 5, so that gives us the 10px by 10px square. Float them all left in the container and they nicely align into this 50x50 grid.
The key code is:
div {
padding: 1%;
background: #aaa;
float: left;
}
I added alternate background colours to help show you what is there.
This won't play very nicely if you add content to the divs, but it looks like you aren't wanting to do that anyway if they are just 10px wide.
You need 50 × 50 elements anyway, and you cannot create elements in a loop in CSS or in HTML (they have no loops, as they are not programming languages). There are many different ways to generate the elements in server-side or client-side programming languages, but you first need to decide which technology to use and then use the elementary constructs of the chosen language.
Related
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>
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.
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 created a table without borders styling and I want it to underline a row on hover. However, I am getting pretty odd behaviour. When I move mouse over from upside down, nothing happens. In opposite direction, all touched rows get underlined and stay that way until I move mouse over in some other direction. I am pretty confused by this. I wanted to stay out of jquery for simplicity, but with jquery I get the same result. Here is the code..
<div class="information" >
<table id="summary" >
<%
foreach (KeyValuePair<long, float> pair in sums)
{ %>
<tr>
<td class="left" >Automat id: <%= pair.Key%></td>
<td class="right" ><%= pair.Value%></td>
</tr>
<% } %>
</table>
</div>
And the css applied to this div:
table
{
border-collapse: collapse;
border-spacing: 0;
text-align: center;
margin-top:.5em;
}
div.information
{
margin:1em 0;
padding:1em;
font-weight:bold;
text-align: center;
color:#C80;
background-color:#FF9;
border:1px solid #C80;
}
#summary
{
width: 715px;
margin-bottom: 5px;
}
.left
{
text-align: left;
}
.right
{
text-align: right;
}
And the faulty part:
#summary tr:hover
{
border-bottom: dotted 1px gray;
}
Anyone sees an error? Another way? And sorry for the long post.
I know this is old, but it showed up in a Google Search of mine. Browser support for styling tr is pathetic at best. Your styles need to be on the tds, like:
#summary tr:hover td {
border-bottom:solid 1px #FF9;
}
Try using JavaScript onmouseover and onmouseout events. In this events just apply and un-apply your css class.
This looks like a bug in chrome. It works well on Firefox, and not at all in IE.
(IE doesn't support :hover, border-spacing, border for collapsed <tr>s, it goes on and on...)
I've found a simple workaround for Chrome, however - simply add a bottom border for all <tr>s:
#summary tr {
border-bottom:solid 1px #FF9;
}
This will also keep your rows from changing heights and jiggle.
Ok, there seems to be a bug in the way the :hover pseudoselector is being applied to "tr". Change selector to "#summary td:hover {}". It should work.
One note to add, that does not seem too widely known, unlike every other browser tested, chrome redraws the ENTIRE table when applying styles on tr:hover. This may have been fixed in newer versions of chrome
This is VERY critical when you have a large table, chrome lags very badly.
Also, I would highly recommend having a border of the same width set on the TDs before hover, and simply match the BG color, vertical shifts like that are horrible UX. I tried reducing the padding inside the TDs by 1px to account for the border, but had some weird results (yet another reason to hate tables)
This is the way to define Script using JQuery to change row style (you should define your css).
CSS:
.hovercs {
cursor: pointer;
background-color: #70C9C4;
}
JavaScript:
$(function () {
$(document).on({
mouseenter: function () {
$(this).addClass('hovercs');
},
mouseleave: function () {
$(this).removeClass('hovercs');
}
}, 'tbody tr');
});
$(function () {
$(document).on({
mouseenter: function () {
$(this).addClass('hovercs');
},
mouseleave: function () {
$(this).removeClass('hovercs');
}
}, 'tbody tr');
});
.hovercs {
cursor: pointer;
background-color: #70C9C4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>Vipin Yadav</td>
<td>Frankfrut</td>
<td>Germany</td>
</tr>
<tr>
<td>Ramesh</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Reetika</td>
<td>Melbourne</td>
<td>Austria</td>
</tr>
</table>
</body>
</html>
$(function () {
$(document).on({
mouseenter: function () {
$(this).addClass('hovercs');
},
mouseleave: function () {
$(this).removeClass('hovercs');
}
}, 'tbody tr');
});