`How to add a margin to a table row <tr>`

Question

I have a table containing many rows. Some of these rows are class="highlight" and signify a row that needs to be styled differently and highlighted. What I'm trying to do is add some extra spacing before and after these rows so they appear slightly separated from the other rows.

I thought I could get this done with margin-top:10px;margin-bottom:10px; but it's not working. Anyone knows how to get this done, or if it could be done? Here's the HTML and I've set the 2nd tr in the tbody to class highlight.

<table>
<thead>
  <tr>
     <th>Header 1</th>
     <th>Header 2</th>
  </tr>
</thead>
<tbody>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr class="highlight">
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
  <tr>
     <td>Value1</td>
     <td>Value2</td>
  </tr>
</tbody>
</table>

possible duplicate of CSS: how do I create a gap between rows in a table? andstackoverflow.com/questions/351058/… — j08691, May 21 '12 at 18:13
try this: tr.highlight td { position: relative; background-color: #EEEEEE; padding: 5px 0 5px 0; } — Sajmon, May 21 '12 at 18:19
if you are using the separated box model, I obtained the effect you wanted playing with borders of cell elements (TD and TH), not TR like @Jrd suggested: tr.highlight td { border-top: 10px solid; border-bottom: 10px solid; border-color: transparent; } — Enrico M., Aug 7 '15 at 9:18

score 56 · Accepted Answer

up vote56down voteaccepted

Table rows cannot have margin values. Can you increase the padding? That would work. Otherwise you could insert a <tr class="spacer"></tr> before and after the class="highlighted" rows.

shareimprove this answer

4

Adding any kind of padding to <tr> doesn't move anything unless you specify display: block, at which point the width of the <tr> is based on content. Adding your suggested spacer <tr> with a set heightworks perfectly, though. – baacke Jan 22 '14 at 19:08

To be more precise, <tr> cannot have margin values since CSS 2.1 but it could until CSS 2. I have never found the reason behind the change. – Futal Jun 4 '14 at 16:10

Yes, unfortunately tr can't have margin values, like Steve wrote. I set margin value to each td like replacement for this. :( padding isn't solution, by my opinion, especially if rows are different colors (background) and You need some, let say, empty (white) space. – nelek Jul 16 '15 at 19:28

add a comment

Mr Lister · Answer 2 · 2012-05-21 18:14:35Z

You can't style the <tr>s themselves, but you can give the <td>s inside the "highlight" <tr>s a style, like this

tr.highlight td {padding-top: 10px; padding-bottom:10px}

This will only visually work if the td background-color is the same as the tr. — baacke, Jan 22 '14 at 19:10

Jrd · Answer 3 · 2015-07-16 19:23:39Z

I know this is kind of old, but I just got something along the same lines to work. Couldn't you do this?

tr.highlight {
    border-top: 10px solid;
    border-bottom: 10px solid;
    border-color: transparent;
}

Hope this helps.

thanks, but had to move properties on the TD elements to have it work: tr.highlight td { border-top: 10px solid; border-bottom: 10px solid; border-color: transparent; } — Enrico M., Aug 7 '15 at 9:21

Mehmet Eren Yener · Answer 4 · 2014-02-24 21:58:54Z

up vote9down vote

line-height can be the possible solution

tr
{
    line-height:30px;
}

shareimprove this answer

answered Feb 24 '14 at 21:58

Mehmet Eren Yener

1,216824

Thanks that did the trick, That is dumb margin and padding do not work. Thakns – L1ghtk3ira Jul 25 at 13:53

add a comment

aRahmanS29 · Answer 5 · 2015-04-02 09:35:36Z

The border-spacing property will work for this particular case.

Reference.

user1337 · Answer 6 · 2012-05-21 18:16:48Z

up vote1down vote

I would strongly suggest you take a look at your analytics and see how many IE7 or less users you have visiting the site. I've found I'm now able to drop support for IE7, and that means I can use CSS tables... which will make things a lot easier to work with.

shareimprove this answer

answered May 21 '12 at 18:16

user1337

700616

2

OK, I'll bite. Why are things with CSS table styles easier to work with than real tables? What is, for instance, the easier alternative to the colspan and rowspan attributes? – Mr Lister May 21 '12 at 19:23

Colspan and rowspan, depending on how you're using them, are something that's likely easier with HTML tables. That said, you can get greater control over the layout using CSS. You're already running into an issue where HTML tables aren't working as you would expect them. In CSS, it's a bit easier. – user1337 May 22 '12 at 15:46

1

-1: If you are using tables for showing tabular data, you are doing so totally correctly. Table is the only semantically correct way to do that. You just should avoid tables if you are misusing them for layouting-reasons (which the OP did not mention). – Gundon Mar 15 '15 at 18:52

CSS tables do everything HTML tables can do, and some more. For example, CSS tables can be responsive. They can also completely reflow the data based on a class, allowing for simple implementation of multiple views of the same data. Examples css-tricks.com/responsive-data-tables CSS tables are also semantically correct. I'm not sure why you would say they're not. – user1337 Mar 17 '15 at 15:24

What you linked to are pretty normal HTML tables with some additional CSS rules. Thats exactly what I was talking about. CSS does not change the DOM and since the data is present structured in the DOM, its sematicaly correct. When you spoke of CSS-Tables I assumed you were speaking of data which is made to look like a table via CSS but not really inside table-objects.. As table is a HTML-Tag, I have no idea why you would call that a CSS-Table otherwise.. – Gundon Mar 26 '15 at 18:38

add a comment

Tomi M · Answer 7 · 2013-01-07 15:37:33Z

You might try to use CSS transforms for indenting a whole tr:

tr.indent {
   -webkit-transform: translate(20px,0);
   -moz-transform: translate(20px,0);
}

I think this is a valid solution. Seems to work fine in Firefox 16, Chrome 23 and Safari 6 on my OSX.

user1429980 · Answer 8 · 2013-08-22 21:24:02Z

Here's a neat way I did it:

table tr {
    border-bottom: 4px solid;
}

That will add 4px of vertical spacing between each row. And if you wanted to not get that border on the last child:

table tr:last-child {
    border-bottom: 0;
}

Reminder that CSS3 pseudo-selectors will only work in IE 8 and below with selectivizr.

This is the real way to do it. Simple and very un-annoying. Came to the same conclusion myself. You missed one thing, just give the border a transparent color... border-bottom: 10px solid transparent — mangonights, Feb 26 at 2:25

mohamed abo elmagd · Answer 9 · 2014-08-19 13:53:04Z

add this style before the class="highlighted" padding-bottom and display is inline-table

user3540275 · Answer 10 · 2014-10-18 19:58:13Z

add a div to the cells that you would like to add some extra spacing:

<tr class="highlight">
 <td><div>Value1</div></td>
 <td><div>Value2</div></td>
</tr>
tr.highlight td div {
margin-top: 10px;
}

score 0 · Answer 11

Another possibility is to use a pseudo selector :after or :before

tr.highlight td:last-child:after
{
  content: "\0a0";
  line-height: 3em;
}

That might avoid issues with browser that don't understand the pseudo selectors, plus background-colors are not an issue.

The downside is however, that it adds some extra whitespace after the last cell.

score 0 · Answer 12

I gave up and inserted a simple jQuery code as below. This will add a tr after every tr, if you have so many trs like me. Demo: https://jsfiddle.net/acf9sph6/

<table>
  <tbody>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
     <tr class="my-tr">
        <td>one line</td>
     </tr>
  </tbody>
</table>
<script>
$(function () {
       $("tr.my-tr").after('<tr class="tr-spacer"/>');
});
</script>
<style>
.tr-spacer
{
    height: 20px;
}
</style>

Vukašin Manojlović · Accepted Answer · 2013-01-09 12:28:06Z

A hack to give the appearance of margins between table rows is to give them a border the same color as the background. This is useful when styling a 3rd party theme where you can't change the html markup. Eg:

tr{ 
    border: 5px solid white;
}


来自  http://stackoverflow.com/questions/10690299/how-to-add-a-margin-to-a-table-row-tr

`CSS Cell Margin`

up vote57down votefavorite

7

In my HTML document, I have a table with two columns and multiple rows. How can I increase the space in between the first and second column with css? I've tried applying "margin-right: 10px;" to each of the cells on the left hand side, but to no effect.

html css table cell margin

There is a good CSS solution here, newly updated: stackoverflow.com/a/21551008/2827823 – LGSon Jul 29 at 11:08

add a comment

`16 Answers`

activeoldestvotes

up vote61down voteaccepted

Apply this to your first <td>:

padding-right:10px;

HTML example:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

shareimprove this answer

edited Jan 9 '13 at 12:28

Vukašin Manojlović

1,73821225

answered Apr 4 '09 at 3:32

roman m

13.8k2288126

7

A far better approach to it would be to use border-collapse : seperate – Gaurav Ramanan Jun 29 '13 at 10:58

3

Just in case someone was copy/pasting the border-collapse technique the above comment, it should beborder-collapse: separate (there was a typo in the spelling of separate above) – Tony DiNitto May 15 at 21:35

add a comment

up vote129down vote

A word of warning: though padding-right might solve your particular (visual) problem, it is not the right way to add spacing between table cells. What padding-right does for a cell is similar to what it does for most other elements: it adds space within the cell. If the cells do not have a border or background colour or something else that gives the game away, this can mimic the effect of setting the space between the cells, but not otherwise.

As someone noted, margin specifications are ignored for table cells:

CSS 2.1 Specification – Tables – Visual layout of table contents

Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.

What's the "right" way then? If you are looking to replace the cellspacing attribute of the table, then border-spacing (with border-collapse disabled) is a replacement. However, if per-cell "margins" are required, I am not sure how that can be correctly achieved using CSS. The only hack I can think of is to use padding as above, avoid any styling of the cells (background colours, borders, etc.) and instead use container DIVs inside the cells to implement such styling.

I am not a CSS expert, so I could well be wrong in the above (which would be great to know! I too would like a table cell margin CSS solution).

Cheers!

shareimprove this answer

edited Jun 7 '13 at 16:10

Rory O'Kane

11.5k44978

answered Jun 7 '10 at 2:35

ravi

2,04131210

This is great and all for padding, but what about for margin? I want to add space outside of the cell that contains a border. Margin CSS seems to have no affect on cells. – Levitikon Oct 27 '11 at 16:03

1

Levitikon, that's right - margins do not work for reasons above. The only way to get what you want, AFAIK, is to wrap the contents of the cell in a DIV, add the margin and border to that DIV, rather than the cell. – raviMay 17 '12 at 4:05

I posted a CSS solution a long time ago (updated it today): stackoverflow.com/a/21551008/2827823 – LGSonJul 29 at 11:04

add a comment

up vote13down vote

I realize this is quite belated, but for the record, you can also use CSS selectors to do this (eliminating the need for inline styles.) This CSS applies padding to the first column of every row:

table > tr > td:first-child { padding-right:10px }

And this would be your HTML, sans CSS!:

<table><tr><td>data</td><td>more data</td></tr></table>

This allows for much more elegant markup, especially in cases where you need to do lots of specific formatting with CSS.

shareimprove this answer

answered Jul 23 '09 at 14:47

Rob

add a comment

up vote12down vote

margin does not work unfortunately on individual cells, however you could add extra columns between the two cells you want to put a space between... another option is to use a border with the same colour as the background...

shareimprove this answer

answered Apr 7 '11 at 13:33

Cian

12112

4

+1 for suggestion of border with same background colour – ajcw Jan 30 '12 at 11:04

It seems like border has the same problem as padding - it adds space between the cell content and boundary, not outside the boundary. – stewbasic Feb 16 at 2:01

add a comment

up vote11down vote

If you can't use padding (for example you have borders in td) try this

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

shareimprove this answer

answered Feb 19 '13 at 14:11

nika206

11912

2

You can check more about border-collapse : separate here css-tricks.com/almanac/properties/b/border-collapse – Gaurav Ramanan Jun 29 '13 at 10:57

add a comment

up vote7down vote

You can simply do that:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

No CSS is required :) This 10px is your space.

shareimprove this answer

answered Apr 5 '13 at 21:21

Trebor

55738

this is good, simple, and effective, thanks for reminding me +1 – Hayden Thring Jun 21 '13 at 11:06

5

This is not a good approach for separation of structure and styling. It's not a case of whether or not CSS is required - CSS should be used for something like this. – Simon Robb Oct 25 '13 at 1:44

shouldn't be <td style="width:10px;"></td> – Rune Jeppesen Jun 26 '14 at 12:03

Remember, the simplest solutions are the best. Method with inline style is also good :) – Trebor Aug 27 '14 at 22:16

add a comment

up vote6down vote

Try padding-right. You're not allowed to put margin's between cells.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

shareimprove this answer

edited Jan 9 '13 at 12:29

Anders R. Bystrup

11.4k73641

answered Apr 4 '09 at 3:32

mpen

84.1k122481740

add a comment

up vote4down vote

This solution work for td's that need both border and padding for styling. (Tested on Chrome 32, IE 11, Firefox 25)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Updated 2016

Firefox now support it without inline-block and a set width

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }

<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>

Expand snippet

shareimprove this answer

edited Jul 29 at 10:54

answered Feb 4 '14 at 11:19

LGSon

22.3k31740

This also worked for css tables (display:table*) made out of divs. – Necreaux Dec 3 '15 at 15:37

add a comment

up vote3down vote

Using border-collapse: separate; didn't work for me, because I only need a margin in-between the table cells not on the sides of the table.

I came up with the next solution:

-CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

-HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

shareimprove this answer

answered Oct 28 '14 at 22:58

Robin

537

add a comment

up vote2down vote

You can't single out individual columns in a cell in that manner. In my opinion, your best option is to add a style='padding-left:10px' on the second column and apply the styles on an internal div or element. This way you can achieve the illusion of a greater space.

shareimprove this answer

answered Apr 4 '09 at 3:32

jerebear

3,66932033

add a comment

up vote2down vote

If you have control of the width of the table, insert a padding-left on all table cells and insert a negative margin-left on the whole table.

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

Note, the width of the table needs to include the padding/margin width. Using the above as an example, the visual width of the table will be 700px.

This is not the best solution if you're using borders on your table cells.

shareimprove this answer

answered Mar 5 '13 at 22:41

Dallas Clark

1,68121828

add a comment

up vote2down vote

`SOLUTION`

I found the best way to solving this problem was a combination of trial and error and reading what was written before me:

http://jsfiddle.net/MG4hD/

As you can see I have some pretty tricky stuff going on... but the main kicker of getting this to looking good are:

PARENT ELEMENT (UL): border-collapse: separate; border-spacing: .25em; margin-left: -.25em; CHILD ELEMENTS (LI): display: table-cell; vertical-align: middle;

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

shareimprove this answer

answered Jul 3 '13 at 3:32

Oneezy

1,25741834

add a comment

up vote1down vote

Following Cian's solution of setting a border in place of a margin, I discovered you can set border color to transparent to avoid having to color match the background. Works in FF17, IE9, Chrome v23. Seems like a decent solution provided you don't also need an actual border.

shareimprove this answer

answered Jan 1 '13 at 2:43

Vitaly Chernobyl

112

add a comment

up vote1down vote

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

Expand snippet

Using padding is not correct way of doing it, it may change the look but it is not what you wanted. This may solve your issue.

shareimprove this answer

answered Dec 17 '15 at 7:00

Karthik Sen

1187

This solution is already posted, no need for 2 answers saying the same thing. – LGSon Dec 17 '15 at 9:06

add a comment

up vote1down vote

You can use both of them:

padding-right:10px;

padding-right:10%;

But it's better to use with %.

shareimprove this answer

answered May 19 at 11:16

Muhammad Awais

3481617

1

I upvoted, but you might have explained why it is better to use % – Mawg Jul 29 at 8:28

1

Normally % is used to make responsive. – Muhammad Awais Jul 29 at 10:35

Plus one - maybe you could edit your answer to say so? Not veryone who reads might read the comments.. If you want to add a link to something about responsive design, even better :-) – Mawg Jul 29 at 12:54

add a comment

up vote0down vote

If padding isn't working for you, another work around is to add extra columns and set a margin via width using <colgroup>. None of the padding solutions above were working for me as I was trying to give the cell border itself a margin, and this is what solved the problem in the end:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

Style the borders of the table cells using :nth-child so that the 2nd and third columns appear to be a single column.

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }

来自 http://stackoverflow.com/questions/716442/css-cell-margin

Vukašin Manojlović · Accepted Answer · 2013-01-09 12:28:06Z

up vote61down voteaccepted

Apply this to your first <td>:

padding-right:10px;

HTML example:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

shareimprove this answer

edited Jan 9 '13 at 12:28

Vukašin Manojlović

1,73821225

answered Apr 4 '09 at 3:32

roman m

13.8k2288126

7

A far better approach to it would be to use border-collapse : seperate – Gaurav Ramanan Jun 29 '13 at 10:58

3

Just in case someone was copy/pasting the border-collapse technique the above comment, it should beborder-collapse: separate (there was a typo in the spelling of separate above) – Tony DiNitto May 15 at 21:35

add a comment

Rory O'Kane · Answer 15 · 2013-06-07 16:10:28Z

A word of warning: though padding-right might solve your particular (visual) problem, it is not the right way to add spacing between table cells. What padding-right does for a cell is similar to what it does for most other elements: it adds space within the cell. If the cells do not have a border or background colour or something else that gives the game away, this can mimic the effect of setting the space between the cells, but not otherwise.

As someone noted, margin specifications are ignored for table cells:

CSS 2.1 Specification – Tables – Visual layout of table contents

Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.

What's the "right" way then? If you are looking to replace the cellspacing attribute of the table, then border-spacing (with border-collapse disabled) is a replacement. However, if per-cell "margins" are required, I am not sure how that can be correctly achieved using CSS. The only hack I can think of is to use padding as above, avoid any styling of the cells (background colours, borders, etc.) and instead use container DIVs inside the cells to implement such styling.

I am not a CSS expert, so I could well be wrong in the above (which would be great to know! I too would like a table cell margin CSS solution).

Cheers!

This is great and all for padding, but what about for margin? I want to add space outside of the cell that contains a border. Margin CSS seems to have no affect on cells.
Levitikon, that's right - margins do not work for reasons above. The only way to get what you want, AFAIK, is to wrap the contents of the cell in a DIV, add the margin and border to that DIV, rather than the cell.
I posted a CSS solution a long time ago (updated it today): stackoverflow.com/a/21551008/2827823

`Rob` · Answer 16 · 2009-07-23 14:47:27Z

I realize this is quite belated, but for the record, you can also use CSS selectors to do this (eliminating the need for inline styles.) This CSS applies padding to the first column of every row:

table > tr > td:first-child { padding-right:10px }

And this would be your HTML, sans CSS!:

<table><tr><td>data</td><td>more data</td></tr></table>

This allows for much more elegant markup, especially in cases where you need to do lots of specific formatting with CSS.

Cian · Answer 17 · 2011-04-07 13:33:38Z

margin does not work unfortunately on individual cells, however you could add extra columns between the two cells you want to put a space between... another option is to use a border with the same colour as the background...

It seems like border has the same problem as padding - it adds space between the cell content and boundary, not outside the boundary.

nika206 · Answer 18 · 2013-02-19 14:11:13Z

If you can't use padding (for example you have borders in td) try this

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

You can check more about border-collapse : separate here css-tricks.com/almanac/properties/b/border-collapse

Trebor · Answer 19 · 2013-04-05 21:21:43Z

up vote7down vote

You can simply do that:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

No CSS is required :) This 10px is your space.

shareimprove this answer

answered Apr 5 '13 at 21:21

Trebor

55738

this is good, simple, and effective, thanks for reminding me +1 – Hayden Thring Jun 21 '13 at 11:06

5

This is not a good approach for separation of structure and styling. It's not a case of whether or not CSS is required - CSS should be used for something like this. – Simon Robb Oct 25 '13 at 1:44

shouldn't be <td style="width:10px;"></td> – Rune Jeppesen Jun 26 '14 at 12:03

Remember, the simplest solutions are the best. Method with inline style is also good :) – Trebor Aug 27 '14 at 22:16

add a comment

Anders R. Bystrup · Answer 20 · 2013-01-09 12:29:16Z

Try padding-right. You're not allowed to put margin's between cells.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

LGSon · Answer 21 · 2016-07-29 10:54:19Z

This solution work for td's that need both border and padding for styling. (Tested on Chrome 32, IE 11, Firefox 25)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Updated 2016

Firefox now support it without inline-block and a set width

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }

<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>

Expand snippet

This also worked for css tables (display:table*) made out of divs.

Robin · Answer 22 · 2014-10-28 22:58:57Z

Using border-collapse: separate; didn't work for me, because I only need a margin in-between the table cells not on the sides of the table.

I came up with the next solution:

-CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

-HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

jerebear · Answer 23 · 2009-04-04 03:32:58Z

You can't single out individual columns in a cell in that manner. In my opinion, your best option is to add a style='padding-left:10px' on the second column and apply the styles on an internal div or element. This way you can achieve the illusion of a greater space.

Dallas Clark · Answer 24 · 2013-03-05 22:41:54Z

If you have control of the width of the table, insert a padding-left on all table cells and insert a negative margin-left on the whole table.

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

Note, the width of the table needs to include the padding/margin width. Using the above as an example, the visual width of the table will be 700px.

This is not the best solution if you're using borders on your table cells.

Oneezy · Answer 25 · 2013-07-03 03:32:19Z

`SOLUTION`

I found the best way to solving this problem was a combination of trial and error and reading what was written before me:

http://jsfiddle.net/MG4hD/

As you can see I have some pretty tricky stuff going on... but the main kicker of getting this to looking good are:

PARENT ELEMENT (UL): border-collapse: separate; border-spacing: .25em; margin-left: -.25em; CHILD ELEMENTS (LI): display: table-cell; vertical-align: middle;

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

Vitaly Chernobyl · Answer 26 · 2013-01-01 02:43:25Z

Following Cian's solution of setting a border in place of a margin, I discovered you can set border color to transparent to avoid having to color match the background. Works in FF17, IE9, Chrome v23. Seems like a decent solution provided you don't also need an actual border.

Karthik Sen · Answer 27 · 2015-12-17 07:00:28Z

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

Expand snippet

Using padding is not correct way of doing it, it may change the look but it is not what you wanted. This may solve your issue.

This solution is already posted, no need for 2 answers saying the same thing.

Muhammad Awais · Answer 28 · 2016-05-19 11:16:00Z

up vote1down vote

You can use both of them:

padding-right:10px;

padding-right:10%;

But it's better to use with %.

shareimprove this answer

answered May 19 at 11:16

Muhammad Awais

3481617

1

I upvoted, but you might have explained why it is better to use % – Mawg Jul 29 at 8:28

1

Normally % is used to make responsive. – Muhammad Awais Jul 29 at 10:35

Plus one - maybe you could edit your answer to say so? Not veryone who reads might read the comments.. If you want to add a link to something about responsive design, even better :-) – Mawg Jul 29 at 12:54

add a comment

score 0 · Answer 29

If padding isn't working for you, another work around is to add extra columns and set a margin via width using <colgroup>. None of the padding solutions above were working for me as I was trying to give the cell border itself a margin, and this is what solved the problem in the end:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

Style the borders of the table cells using :nth-child so that the 2nd and third columns appear to be a single column.

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }

You are here

table tr td 的padding margin 有大用

`How to add a margin to a table row <tr>`

`13 Answers`

`CSS Cell Margin`

`16 Answers`

`SOLUTION`

友情链接

搜索表单

用户登录

You are here

table tr td 的padding margin 有大用

How to add a margin to a table row <tr>

13 Answers

CSS Cell Margin

16 Answers

SOLUTION

友情链接

`How to add a margin to a table row <tr>`

`13 Answers`

`CSS Cell Margin`

`16 Answers`

`SOLUTION`