Develop Reference

Trying to add padding to a variable in Javascript? [duplicate]

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.

How to limit data length to cell width?

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>

Center a Button Vertically in a Table in the CSS Foundation Framework?

I have a Foundation button:
Delete
Which is inside a table row cell: ``button```
As you can see the button is not aligned vertically centered.
Here is a JSFiddle I created to show the problem.
<table class="centered columns">
<thead>
<tr>
<td>Granted</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>true</td>
<td>Delete </td>
</tr>
</tbody>
</table>
How can I center a Button Vertically in a Table in the CSS Foundation Framework?

You are just need to remove the button margin-bottom property.
jsfiddle

This will centre everything in the middle of your table. But as its CSS3 you will need to only be worried about modern browsers.
td{
position:relative;
}
.button{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
JSFIDDLE

Just add Margin Auto to button class
.button{
margin: auto;
}
and remove previous styling Because it will sift up and it will not work;Auto will also be responsive as compare to position absolute

add id="top-padding" into button and add this bit of CSS
<style>
#top-padding {
padding-top: 10px;
}
</style>
might not be perfect but you can mess around with the number of pixels until it is centered

How to Make CSS3 Transform:Rotate Automatically Resize

I am looking for the best approach to solve this situation:
Given a 4 cell grid. I'd like the top row to be of fixed height and the right column to be of fixed width. The left column's width and the bottom row's height would then resize automatically as you resize the screen.
(that's the easy part .. just set the "northeast" cell in an HTML TABLE to fixed size and set the TABLE's height and width to 100%)
Now the tricky part. I want the southeast, northwest, and northeast cells to be rotated. Since the northeast cell is a fixed size square, that's super easy to do, just rotate it. However the southeast and northwest cells are dynamic in size based on the window's height and width.
Here is a super simple example of the situation -- I will rotate only the southeast corner for this example:
<html>
<head>
<style>
#mainGrid {
width: 100%;
height: 100%;
}
#nw {
background-color:blue;
}
#ne {
height: 100px;
width: 100px;
transform:rotate(180deg);
background-color:red;
}
#sw { background-color:yellow; }
#se {
transform:rotate(-90deg);
background-color:green;
}
</style>
</head>
<body>
<table id="mainGrid">
<tr>
<td id="nw">Northwest</td>
<td id="ne">Northeast</td>
</tr>
<tr>
<td id="sw">Southwest</td>
<td id="se">Southeast</td>
</tr>
</table>
</body>
</html>
Which results in:
What would be the simplest approach to getting the TABLE (or a grid of DIV or UL) to behave nicely when the screen is resized, like it does before the rotation? In other words, the southeast cell would have the same size and location it originally did, but the contents would layout rotated.
Can this be done with pure HTML5/CSS3 and no javascript? If not, what would be the simplest javascript I could use -- without any libraries -- to pull this off?

You could just wrap the content in a div or something and rotate that rather than the td itself:
<table id="mainGrid">
<tr>
<td id="nw">Northwest</td>
<td id="ne">Northeast</td>
</tr>
<tr>
<td id="sw">Southwest</td>
<td id="se"><div class="rotated">Southeast</div></td>
</tr>
</table>
CSS:
#mainGrid {
width: 100%;
height: 100%;
}
#nw {
background-color:blue;
}
#ne {
height: 100px;
width: 100px;
transform:rotate(180deg);
background-color:red;
}
#sw { background-color:yellow; }
#se {
background-color:green;
}
.rotated {
transform:rotate(-90deg);
}
Fiddle:
https://jsfiddle.net/2hagsgs2/

Center Aling a Dynamic Width Table's Caption

I Have a Caption with Dynamic Width, and i Want it in the center of the table, but inline-block isnt working right, the inline make it in the center of the td, not of all the table, How can i make it in the center of the table? Here is a example of this html:
<table class="hours-table" style="width: 100%;" border="0"><caption>Title</caption>
<tbody>
<tr>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
<td>1_4</td>
<td>1_5</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
<td>2_4</td>
<td>2_5</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
<td>3_4</td>
<td>3_5</td>
</tr>
<tr>
<td>4_1</td>
<td>4_2</td>
<td>4_3</td>
<td>4_4</td>
<td>4_5</td>
</tr>
<tr>
<td>5_1</td>
<td>5_2</td>
<td>5_3</td>
<td>5_4</td>
<td>5_5</td>
</tr>
</tbody>
</table>
Thanks a lot in Advance!

If you want it to be both vertically and horizontally aligned in the center, you could use the following CSS:
table { position: relative; }
caption {
​position: absolute;
top: 50%;
left: 50%;
margin: -0.5em -10px; /* Change the -10px part depending on length of title */
}​
jsFiddle
If you only want it to be horizontally aligned (at the top of the table, you could use:
caption { text-align: center; }
​
jsFiddle
Edit: Here is a solution that will allow a background behind a centered caption but also create a white background behind just the text part of the caption:
HTML
<caption>Title</caption>
CSS
div { background: url('background_image.jpg') repeat; }
caption {
text-align: center;
background: rgba(0,0,0,0);
}
span { background: white; }
JS
$(function() {
var caption = $('caption');
caption.html('<span>' + caption.html() + '</span>');
});​
jsFiddle