In an HTML table, the cellpadding and cellspacing can be set like this:
<table cellspacing="1" cellpadding="1">
How can the same be accomplished using CSS?
Basics
For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":
td {
padding: 10px;
}
For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".
Issues in IE ≤ 7
This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.
In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.
table {
border-spacing: 0;
border-collapse: collapse;
}
Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.
Default
The default behavior of the browser is equivalent to:
table {border-collapse: collapse;}
td {padding: 0px;}
Cellpadding
Sets the amount of space between the contents of the cell and the cell wall
table {border-collapse: collapse;}
td {padding: 6px;}
Cellspacing
Controls the space between table cells
table {border-spacing: 2px;}
td {padding: 0px;}
Both
table {border-spacing: 2px;}
td {padding: 6px;}
Both (special)
table {border-spacing: 8px 2px;}
td {padding: 6px;}
Note: If there is border-spacing set, it indicates border-collapse property of the table is separate.
Try it yourself!
Here you can find the old HTML way of achieving this.
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
Setting margins on table cells doesn't really have any effect as far as I know. The true CSS equivalent for cellspacing is border-spacing - but it doesn't work in Internet Explorer.
You can use border-collapse: collapse to reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the cellspacing attribute.
This hack works for Internet Explorer 6 and later, Google Chrome, Firefox, and Opera:
table {
border-collapse: separate;
border-spacing: 10px; /* cellspacing */
*border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
padding: 10px; /* cellpadding */
}
The * declaration is for Internet Explorer 6 and 7, and other browsers will properly ignore it.
expression('separate', cellSpacing = '10px') returns 'separate', but both statements are run, as in JavaScript you can pass more arguments than expected and all of them will be evaluated.
For those who want a non-zero cellspacing value, the following CSS worked for me, but I'm only able to test it in Firefox.
See the Quirksmode link posted elsewhere for compatibility details. It seems it may not work with older Internet Explorer versions.
table {
border-collapse: separate;
border-spacing: 2px;
}
The simple solution to this problem is:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
Also, if you want cellspacing="0", don't forget to add border-collapse: collapse in your table's stylesheet.
Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap every cell in a column to get a uniform effect. For example, to just get wider left & right margins:
So the CSS will be,
div.cellwidener {
margin: 0px 15px 0px 15px;
}
td.tight {
padding: 0px;
}
<table border="0">
<tr>
<td class="tight">
<div class="cellwidener">My content</div>
</td>
</tr>
</table>
Yes, it's a hassle. Yes, it works with Internet Explorer. In fact, I've only tested this with Internet Explorer, because that's all we're allowed to use at work.
This style is for full reset for tables - cellpadding, cellspacing and borders.
I had this style in my reset.css file:
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
padding: 0px; /* Replace cellpadding */
}
TBH. For all the fannying around with CSS you might as well just use cellpadding="0" cellspacing="0" since they are not deprecated...
Anyone else suggesting margins on <td>'s obviously has not tried this.
Simply use CSS padding rules with table data:
td {
padding: 20px;
}
And for border spacing:
table {
border-spacing: 1px;
border-collapse: collapse;
}
However, it can create problems in older version of browsers like Internet Explorer because of the diff implementation of the box model.
From what I understand from the W3C classifications is that <table>s are meant for displaying data 'only'.
Based on that I found it a lot easier to create a <div> with the backgrounds and all that and have a table with data floating over it using position: absolute; and background: transparent;...
It works on Chrome, Internet Explorer (6 and later) and Mozilla Firefox (2 and later).
Margins are used (or meant anyways) to create a spacer between container elements, like <table>, <div> and <form>, not <tr>, <td>, <span> or <input>. Using it for anything other than container elements will keep you busy adjusting your website for future browser updates.
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
You can easily set padding inside the table cells using the CSS padding property. It is a valid way to produce the same effect as the table's cellpadding attribute.
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 10px;
/* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellpadding in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent#mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Similarly, you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute. However, in order to work border-spacing the value of border-collapse property muse be separate, which is default.
table {
border-collapse: separate;
border-spacing: 10px;
/* Apply cell spacing */
}
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 5px;
/* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellspacing in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent#mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Try this:
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
Or try this:
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
I used !important after the border-collapse like
border-collapse: collapse !important;
and it works for me in IE7. It seems to override the cellspacing attribute.
Say that we want to assign a 10px "cellpadding" and a 15px "cellspacing" to our table, in a HTML5-compliant way. I will show here two methods giving really similar outputs.
Two different sets of CSS properties apply to the same HTML markup for the table, but with opposite concepts:
the first one uses the default value for border-collapse (separate) and uses border-spacing to provide the cellspacing,
the second one switches border-collapse to collapse and uses the border property as the cellspacing.
In both cases, the cellpadding is achieved by assigning padding:10px to the tds and, in both cases, the background-color assigned to them is only for the sake of a clearer demo.
First method:
table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}
<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
Second method:
table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}
<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
border-collapse: collapse; /* For showing borders in a better shape. */
}
If margin didn't work, try to set display of tr to block and then margin will work.
Related
I have a grid where sometimes the description's data is more than the cell width and then it wraps and I don't want that to happen, I would like to just show enough data in the cell and add an ellipsis at the end of the data and add a tooltip to show the remainder of the data, which I can figure out on my own, just not sure how to limit the data to the cells width. The column in question is 200px
Here is what it currently looks like
and this is how I would like it to look
To achieve expected result, use below option of using max-width and text-overflow: ellipsis
table tr td{
border: 1px solid black;
}
td{
max-width: 200px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Custom size wall corner single entry</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Text-overflow works only for block level elements, so to make it work for table cell add max-width to apply the ellipsis( td is by default with display: table-cell)
As per MDN, The text-overflow property only affects content that is overflowing a block container element - https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
codepen - https://codepen.io/nagasai/pen/RmmmKK
Checkout this: https://css-tricks.com/almanac/properties/t/text-overflow/
.ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}
.cell {
max-width: 200px:
}
<td class="cell ellipsis">
text inside cell
</td>
I'm trying to remove a bit of css from a certain page as I'm using an Google Org Chart in my drupal site and some of my css is overriding what is already there. Here is the code below.
What I want to remove:
.MainBlock table td {
border-right: 1px solid #045273;
border-bottom: 1px solid #045273;
vertical-align: top;
}
I've tried a number of things, but nothing has worked. All attempts that I haven't removed are below.
<script type="text/javascript">
if (document.URL.indexOf("/node/7794/draft") >= 0) {
//$('.MainBlock').find("table tr").css("border-bottom","");
//$(".MainBlock table td").css("border-bottom":"12px Solid #000");
$(".MainBlock table td").css({ 'border-bottom' : ''});
}
I need it to ignore that line of css, as it's needed on other pages. That, and setting it to 0 or none sort of breaks it.
You can use 0 or none to remove the border, an empty string does not work.
$( '.MainBlock table td' ).css( { 'border-bottom' : 0 } );
.MainBlock table td {
border-right: 1px solid #045273;
border-bottom: 1px solid #045273;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MainBlock">
<table>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
Ultimately I'd stick to CSS if you can. Ensure that you place the same selector after the original and it will override it.
/* original rule */
.MainBlock table td {
border-right: 1px solid #045273;
border-bottom: 1px solid #045273;
vertical-align: top;
}
/* sometime later, maybe in a different file */
.MainBlock table td {
border-bottom: 0;
}
An alternative is to increase the selectors specificity. Since it's a Drupal site there should be a page ID to hook onto to, something like:
.page-node-2793683 .MainBlock table td {
border-bottom: 0;
}
EDIT
Per clarification and #EF it:
To prevent the styles being applied to a particular page you can use :not() pseudo selector.
div:not(.page-node-2793683) .MainBlock table td {
border-right: 1px solid #045273;
border-bottom: 1px solid #045273;
vertical-align: top;
}
<div class="page-node-2793683">
<div class="MainBlock">
<table>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
<div class="page-node-10">
<div class="MainBlock">
<table>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
Note: While not required, using not() without a selector proceeding it may not work reliably. The example above may need to be modified to suite your needs.
The beauty of css and the "cascade" (the 'c' in css) is that you don't need javascript to change the way something looks. All you need is a style sheet overrides the "rule" in the other style sheet. Your new rule just has to be more specific and it only needs the properties you are trying to override. In this case
border-bottom: 0;
Have a look at Specificity to learn how to make your rule specific enough to override the old rule.
From the jquery docs http://api.jquery.com/css/#css-propertyName-value:
$( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied
This can't work because border-bottom wasn't assigned directly (i.e. with the style attribute), but through a css rule.
12px Solid doesn't work because it is not valid (the color is missing).
Anyway, I'd suggest to tackle this problem by css directy, not by js
.node-7794 .MainBlock table td {
border-bottom: 0 none;
}
If the rule doesn't work, use the developer console of your browser to find out why
I've been searching over the web for the way to make a table with fixed (frozen) columns and header.
Seems like I finally found the solution and modified it to my needs.
There original fiddle is here.
Here is my modified solution. I tested it in Chrome (version: 55.0.2883.87 m) and Firefox (version: 51.0.1).
The problem is that it works not completely in IE (version: 11.0.9600.18427). During the horizontal scrolling a frozen part of the header is getting scrolled too. Could someone help me to make it working in IE?
And one more question: is the approach safe to use? I mean if it's using some unspecified behavior, then some of the future browsers or even some of the modern browsers might display my table in a wrong way, and it's better to use a safe solution with a few different tables and synchronizing scroll position and rows height.
UPD: one more question: how to make this work stable on the mobile devices?
Here is some code that demonstrates the approach:
$(document).ready(function() {
$('tbody').scroll(function(e) { //detect a scroll event on the tbody
/*
Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain it's relative position at the left of the table.
*/
$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
});
});
.container {
height:200px;
width:400px;
overflow: hidden;
}
table {
position: relative;
background-color: #aaa;
border-collapse: collapse;
table-layout: fixed;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
/*thead*/
thead {
position: relative;
display: block; /*seperates the header from the body allowing it to be positioned*/
}
thead th {
background-color: #99a;
min-width: 120px;
border: 1px solid #222;
}
thead th:nth-child(1) {/*first cell in the header*/
position: relative;
background-color: #88b;
}
/*tbody*/
tbody {
flex: 1;
position: relative;
display: block; /*seperates the tbody from the header*/
overflow: auto;
}
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
}
tbody tr td:nth-child(1) { /*the first cell in each tr*/
position: relative;
background-color: #99a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>Name<br/>123</th>
<th>Town</th>
<th>County</th>
<th>Age</th>
<th>Profession</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
</tr>
<tr>
<th>Name</th>
<th>Town</th>
<th>County</th>
<th>Age<br/>123<br/>321</th>
<th>Profession</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>Macelsfield</td>
<td>Cheshire<br/>123</td>
<td>52</td>
<td>Brewer</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Jenny Jones<br/>123<br/>312</td>
<td>Threlkeld</td>
<td>Cumbria</td>
<td>34</td>
<td>Shepherdess</td>
<td>£28,000</td>
<td>Single</td>
<td>0</td>
</tr>
<tr>
<td>Peter Frampton</td>
<td>Avebury</td>
<td>Wiltshire</td>
<td>57</td>
<td>Musician</td>
<td>£124,000</td>
<td>Married</td>
<td>4</td>
</tr>
<tr>
<td>Simon King</td>
<td>Malvern</td>
<td>Worchestershire</td>
<td>48</td>
<td>Naturalist</td>
<td>£65,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Lucy Diamond</td>
<td>St Albans</td>
<td>Hertfordshire</td>
<td>67</td>
<td>Pharmasist</td>
<td>Retired</td>
<td>Married</td>
<td>3</td>
</tr>
<tr>
<td>Austin Stevenson</td>
<td>Edinburgh</td>
<td>Lothian </td>
<td>36</td>
<td>Vigilante</td>
<td>£86,000</td>
<td>Single</td>
<td>Unknown</td>
</tr>
<tr>
<td>Wilma Rubble</td>
<td>Bedford</td>
<td>Bedfordshire</td>
<td>43</td>
<td>Housewife</td>
<td>N/A</td>
<td>Married</td>
<td>1</td>
</tr>
<tr>
<td>Kat Dibble</td>
<td>Manhattan</td>
<td>New York</td>
<td>55</td>
<td>Policewoman</td>
<td>$36,000</td>
<td>Single</td>
<td>1</td>
</tr>
<tr>
<td>Henry Bolingbroke</td>
<td>Bolingbroke</td>
<td>Lincolnshire</td>
<td>45</td>
<td>Landowner</td>
<td>Lots</td>
<td>Married</td>
<td>6</td>
</tr>
<tr>
<td>Alan Brisingamen</td>
<td>Alderley</td>
<td>Cheshire</td>
<td>352</td>
<td>Arcanist</td>
<td>A pile of gems</td>
<td>Single</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</body>
This is very peculiar. It appears that the problematic code is this line:
$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
It looks like IE11 handles relative positioning of nested elements differently (than Chrome and other browsers). In this case, you are positioning thead with relative positioning with an offset. You are also positioning thead th (it's children) with an offset and relative positioning. Chrome appears to be positioning thead relative to table, and then positioning th relative to thead. IE11, on the other hand, appears to be positioning thead relative to table, and then th just inherits that same positioning regardless of its own positioning.
A fix for this would be the following: on IE11, handle the positioning differently for thead. Instead of setting the positioning on the parent thead, set the positioning on the thead th elements. In that way, your first column will not be 'forced' to inherit thead's positioning (in IE).
$(document).ready(function() {
var isIE11 = !!navigator.userAgent.match(/Trident.*rv\:11\./);
var customScroller;
if (isIE11)
customScroller = function() {
$('thead th').css("left", -$("tbody").scrollLeft()); //if using IE11, fix the th element
};
else
customScroller = function() {
$('thead').css("left", -$("tbody").scrollLeft()); //if not using IE11, fix the thead element
};
$('tbody').scroll(function(e) { //detect a scroll event on the tbody
/*
Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain it's relative position at the left of the table.
*/
customScroller(); //fix the thead relative to the body scrolling
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
//fix the first cell of the header
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
});
});
Here is a full example with your code, showing different handlings based on the browser:
https://jsfiddle.net/8tx4xfhx/5/
Alsol, it would be nice to see if anyone has noticed this behavior before. It appears that IE11 handles nested relative positioning differently than other browsers. Is there a spec somewhere that defines what the standard should be? Should relative positioning be inherited like IE does it? Or should relative positioning always be relative to the parent? I would think the latter. But performance considerations must also be taken.
You should try below code sample with reference of jquery.floatThead.js.
var $demoTable = $("div.table-responsive table");
$demoTable.floatThead({
top: 200,
scrollContainer: function ($table) {
return $table.closest('.table-responsive');
},
position: 'absolute'
});
you need to get the reference of jquery.floatThead.js file and try to apply this on table.
You can check this working on below link.
http://mkoryak.github.io/floatThead/
Generally for frozen rows & columns, I always prefer to use a css-only solution for best browser-compatibility.
I have tried to replicate your code here with a css-only solution.
I am working on a mac, so don't have access to IE. Please verify if its working fine on the same.
Updated fiddle: https://jsfiddle.net/nashcheez/bzuasLcz/81/
Refer code:
table {
position: relative;
width: 700px;
background-color: #aaa;
overflow: hidden;
border-collapse: collapse;
}
/*thead*/
thead {
position: relative;
display: block;
/*seperates the header from the body allowing it to be positioned*/
width: 700px;
overflow: visible;
}
thead th {
background-color: #99a;
min-width: 120px;
height: 36px;
min-height: 36px;
border: 1px solid #222;
}
thead th:nth-child(1) {
/*first cell in the header*/
position: relative;
display: block;
background-color: #88b;
}
tbody tr td:nth-child(2) {
margin-left: 124px;
display: block;
}
/*tbody*/
tbody {
display: block;
width: 700px;
height: 239px;
overflow-y: auto;
}
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
height: 36px;
min-height: 36px;
}
tbody tr td:nth-child(1) {
/*the first cell in each tr*/
position: absolute;
display: inline-block;
background-color: #99a;
}
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Town</th>
<th>County</th>
<th>Age</th>
<th>Profession</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>Macelsfield</td>
<td>Cheshire</td>
<td>52</td>
<td>Brewer</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Jenny Jones</td>
<td>Threlkeld</td>
<td>Cumbria</td>
<td>34</td>
<td>Shepherdess</td>
<td>£28,000</td>
<td>Single</td>
<td>0</td>
</tr>
<tr>
<td>Peter Frampton</td>
<td>Avebury</td>
<td>Wiltshire</td>
<td>57</td>
<td>Musician</td>
<td>£124,000</td>
<td>Married</td>
<td>4</td>
</tr>
<tr>
<td>Simon King</td>
<td>Malvern</td>
<td>Worchestershire</td>
<td>48</td>
<td>Naturalist</td>
<td>£65,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Lucy Diamond</td>
<td>St Albans</td>
<td>Hertfordshire</td>
<td>67</td>
<td>Pharmasist</td>
<td>Retired</td>
<td>Married</td>
<td>3</td>
</tr>
<tr>
<td>Austin Stevenson</td>
<td>Edinburgh</td>
<td>Lothian</td>
<td>36</td>
<td>Vigilante</td>
<td>£86,000</td>
<td>Single</td>
<td>Unknown</td>
</tr>
<tr>
<td>Wilma Rubble</td>
<td>Bedford</td>
<td>Bedfordshire</td>
<td>43</td>
<td>Housewife</td>
<td>N/A</td>
<td>Married</td>
<td>1</td>
</tr>
<tr>
<td>Kat Dibble</td>
<td>Manhattan</td>
<td>New York</td>
<td>55</td>
<td>Policewoman</td>
<td>$36,000</td>
<td>Single</td>
<td>1</td>
</tr>
<tr>
<td>Henry Bolingbroke</td>
<td>Bolingbroke</td>
<td>Lincolnshire</td>
<td>45</td>
<td>Landowner</td>
<td>Lots</td>
<td>Married</td>
<td>6</td>
</tr>
<tr>
<td>Alan Brisingamen</td>
<td>Alderley</td>
<td>Cheshire</td>
<td>352</td>
<td>Arcanist</td>
<td>A pile of gems</td>
<td>Single</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
The problem is that IE does not allow one to adjust the left attribute of a cell in a row independent from the row as a whole. We can see this by editing the DOM directly using the developer window in IE and the developer window in Chrome.
In Chrome, when you scroll left and right, you can see in the Element viewer that the left attribute is changed on the element itself, which overrides all CSS. We can reload the page and set the element attribute manually in this same screen: style:'left:300px', and we will see the header cell move to the right 300px and hover over the remaining header cells. This is good behavior and the behavior that makes this method work.
If we do the same thing in IE and add style: 'left:300px' to the th element, we will see that the cell does not move. Nothing we do to the style attributes of that cell will cause it to leave its place in the table. It is this 'feature' of IE that is causing the method to fail. IE is insisting on maintaining cell order no matter what attributes are applied to the elements within a row.
The trick is to work around this complication in a way that makes all browsers happy. There are many ways to do this, but I would probably use two tables, and use DIVs to position them so that the edges match. I would add javascript so that if one tbody scrolls up or down that it affects the other tbody in the same manner. If it scrolls right or left, nothing happens to the first table, which holds your frozen column headers, and the right table moves in the scroll direction as planned.
By using two tables, IE no longer associates the header that you are trying to freeze with the header that is moving. Careful CSS will disguise your hack and make the table appear as one table.
Good luck and happy coding!
I have a table and within each cell with reside one single div with a class that is prefixed with perc- and will contain on number ranging from 0 to 100. For instance perc-60 which would equate to 60%.
I can do this in CSS by generating a SASS loop and processing 100 variants on the perc- class. For purposes of learning I'd like to know how I can achieve an inline style via Javascript where by I can set the width of the div based on the number in the class. The numbers get applied via a backend system out of my control, but will related to some data from the user.
Example markup:
<table>
<tr>
<td class="perc-60"><div></div></td>
</tr>
<tr>
<td class="perc-15"><div></div></td>
</tr>
<tr>
<td class="perc-45"><div></div></td>
</tr>
<tr>
<td class="perc-16"><div></div></td>
</tr>
<tr>
<td class="perc-88"><div></div></td>
</tr>
<tr>
<td class="perc-79"><div></div></td>
</tr>
<tr>
<td class="perc-98"><div></div></td>
</tr>
</table>
At the moment I use a SASS loop to go through all the classes and target the divs width within the td.
I got carried away, I made it fancy, sorry. I used JavaScript as originally requested. There are comments for each step of the script.
var td = selArray('td'); // Make an array of <td> selectors
for (var i = 0; i < td.length; i++) { // Loop thru array
var perc = td[i].className; // Find each <td> class
//console.log('Cell '+i+': '+perc);
var cell = document.querySelector('.' + perc); // Create DOM Object for <td>
//console.log(cell.className);
var div = cell.querySelector('div'); // Create DOM Object for <td> > <div>
var str = perc.split('-').pop(); // Strip 'perc-' from class, now a String "number" remains
/* http://stackoverflow.com/a/3568968/2813224 */
var divWidth = str + "%"; // Add a "%" to String "number"
//console.log(divWidth);
div.style.width = divWidth; // Assign String "number" as <div> width
//console.log(div.style.width);
div.innerHTML = divWidth; // Insert width as text into <div>
}
/* This function will accept a selector (ex. #elementID, .elementCLASS, elementTAGNAME, etc.) like jQuery does and then returns an array of selectors that matched.
https://developer.mozilla.org/en-US/docs/Web/API/NodeListhttps://developer.mozilla.org/en-US/docs/Web/API/NodeList */
function selArray(sel) {
var eleArr = Array.prototype.slice.call(document.querySelectorAll(sel));
return eleArr;
}
html {
box-sizing: border-box;
font: 900 16px/1.5'Source Code Pro';
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
body {
height: 100vh;
width: 100vw;
background: #666;
}
table.x {
padding: 0;
box-shadow: 0 1px 9px 1px #ccc;
border-radius: 6px;
margin: 20px auto;
width: 80%;
table-layout: fixed !important;
}
.x th {
color: #FFF;
background: #086ac8;
padding: 10px;
text-align: center;
vertical-align: middle;
height: 2em;
}
.x tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.x tr:nth-child(even) {
background-color: #2e90ef;
color: #333;
}
.x td {
border-style: solid;
border-width: 1px;
border-color: #57acff;
padding: 5px;
text-align: left;
vertical-align: middle;
height: 2em;
}
thead th:first-child {
border-top-left-radius: 6px;
}
thead th:last-child {
border-top-right-radius: 6px;
}
.x tbody tr:last-child th:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
.x td div {
height: 1.5em;
outline: 1px solid #FC0;
background: hsla(60, 100%, 50%, .3);
vertical-align: middle;
}
<table class='x'>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="perc-60">
<div></div>
</td>
</tr>
<tr>
<td class="perc-15">
<div></div>
</td>
</tr>
<tr>
<td class="perc-45">
<div></div>
</td>
</tr>
<tr>
<td class="perc-16">
<div></div>
</td>
</tr>
<tr>
<td class="perc-88">
<div></div>
</td>
</tr>
<tr>
<td class="perc-79">
<div></div>
</td>
</tr>
<tr>
<td class="perc-98">
<div></div>
</td>
</tr>
</tbody>
</table>
Here is a jQuery solution that would iterate through the td's and use the class as a parameter:
Hopefully your backend is already outputting single-digit values preceded by a zero.
$(document).ready(function(){
$("td").each(function(){
$(this).width($(this).attr("class").substring(5,7) + "%");
});
});
Make sure your tds are already using the right box-sizing:
td {
box-sizing: border-box;
}
Classes are abstractions which can be re-used across elements and easily bring in sets of properties. This is more modular and maintainable, since the classes can be changed or added to and the changes automatically propagate to all the elements that use them.
There is also a CSS architectural style which involves classes with very small number, even just one, property ("micro-classes"). In this case, it is not about modularity or ability to change the class; it is more a matter of syntactic sugar and compactness. For instance, I can define a class absolute which is defined as .absolute { position: absolute; }, then apply it to an HTML element by simply saying class='absolute', instead of style='position: absolute; '.
In your case, there is no advantage of using classes, especially if you plan to introduce additional preprocessor machinery to generate all of them. What you propose is exactly equivalent to merely putting a style='width: 60%; ' attribute on the element. And that is precisely what you should do.
Putting in-line style attributes directly on HTML elements is not "evil", in the sense that eval is, for example. It's a practice which has been deprecated to help encourage people to write modular, orthogonal style rules independent of the HTML. However, there's absolutely nothing wrong with it if the style is specific to the particular element. In fact, in such cases, it can be be considered bad design to separate and externalize classes whose only purpose is to assign one or more properties to a specific HTML element.
tried to apply this answer to make change the class of the cells in my table on click, yet it doesn't work :(
$('td.link').click(function() {
$('td.button_active').removeClass('button_active');
$('td.link').addClass('button');
$(this).removeClass('button');
$(this).addClass('button_active')
})
My example code in jsfiddle is here..
Could someone take a short look and point what to change?
I am trying to make font red and change background image of clicked cell, other cells leaving with (or returning to) grey font and default backround image.
Thank you in advance!
Valdas
Because you've included MooTools instead of jQuery ;)
Check out this fiddle. It works when using jquery...
$('td.link').click(function() {
$('td.button_active').removeClass('button_active');
$('td.link').addClass('button');
$(this).removeClass('button');
$(this).addClass('button_active')
});
Edit
Here you go, a proper version. What I've done: put buttons inside the table cell (instead of transforming table cells into buttons), used an active class for the active button (instead of copying the button css to the active_button class), and altered the javascript a bit (less lines = nice :))
Check it out here (fiddle)
And the relevant code:
HTML
<table>
<tr>
<td>Link One</td>
</tr>
<tr>
<td>Link Two</td>
</tr>
<tr>
<td>Link Three</td>
</tr>
<tr>
<td>Link Four</td>
</tr>
</table>
CSS
.button {
display: block;
width: 113px;
height: 30px;
text-decoration: none;
background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button.svg);
background-repeat: no-repeat;
background-size: 138px 33px;
border: 1px solid #e6e6e6;
text-align: right;
padding: 0 25px 0 0;
font: 16px/30px 'Ubuntu';
color: #737373;
}
.active {
background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button_active.svg);
color: #ff0000;
cursor: default
}
.button:not(.active):hover {
background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button_hover.svg);
color: #000000;
}
Javascript
$('a.link').click(function(e) {
e.preventDefault();
$('a.active').removeClass('active');
$(this).addClass('active')
});
Note: In a live version, don't forget to wrap your javascript in a $.ready or closure
Be more accurate with libraries defined in jsfiddle. Here is what you need.
$('td.link').click(function() {
$('td.button_active').each(function(index) {
$(this).removeClass('button_active');
});
$('td.link').each(function(index) {
$(this).addClass('button')
});
$(this).removeClass('button');
$(this).addClass('button_active')
})