CSS Cell Margin

Question

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

User · Answer

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.

User · Answer

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

User · Answer

Apply this to your first  lt td gt    padding-right 10px    HTML example    lt table gt      lt tr gt         lt td style  padding-right 10px  gt data lt  td gt         lt td gt more data lt  td gt      lt  tr gt   lt  table gt

User · Answer

If you can t use padding  for example you have borders in td  try this  table               border-collapse  separate             border-spacing  2px

User · Answer

You can use both of them   padding-right 10px   padding-right 10     But it s better to use with

User · Answer

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

User · Answer

You can simply do that    lt html gt   lt table gt       lt tr gt           lt td gt one lt  td gt           lt td width  10px  gt  lt  td gt           lt td gt two lt  td gt       lt  tr gt   lt  table gt   lt  html gt    No CSS is required    This 10px is your space

User · Answer

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

User · Answer

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   lt table gt       lt tr gt           lt td class  col1  gt Player lt  td gt           lt td class  col2  gt Result lt  td gt           lt td class  col3  gt Average lt  td gt       lt  tr gt   lt  table gt      Updated 2016  Firefox now support it without inline-block and a set width   x000D   x000D  table  border-collapse  separate  border-spacing 0    x000D  td   position  relative  padding  5px    x000D  td   left  10px    x000D  td first-child   left  0px    x000D  td nth-child 3    left  20px    x000D  td   border  1px solid gray    x000D   x000D   x000D     CSS table    x000D   table  display  table    x000D   tr   display  table-row    x000D   td   display  table-cell    x000D   x000D   table   border-collapse  separate  border-spacing 0    x000D   td   position  relative  padding  5px    x000D   td   left  10px    x000D   td first-child   left  0px    x000D   td nth-child 3    left  20px    x000D   td   border  1px solid gray    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt Player lt  td gt  x000D       lt td gt Result lt  td gt  x000D       lt td gt Average lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   lt div class  table  gt  x000D     lt div class  tr  gt  x000D       lt div class  td  gt Player lt  div gt  x000D       lt div class  td  gt Result lt  div gt  x000D       lt div class  td  gt Average lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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   lt div class  tableDiv  gt       lt div class  cell1  gt  lt  div gt       lt div class  cellSeperator  gt  lt  div gt       lt div class  cell2  gt  lt  div gt   lt  div gt

User · Answer

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  gt  tr  gt  td first-child   padding-right 10px     And this would be your HTML  sans CSS     lt table gt  lt tr gt  lt td gt data lt  td gt  lt td gt more data lt  td gt  lt  tr gt  lt  table gt    This allows for much more elegant markup  especially in cases where you need to do lots of specific formatting with CSS

User · Answer

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

User · Answer

If padding isn t working for you  another work around is to add extra columns and set a margin via width using  lt colgroup gt   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    lt table gt     lt colgroup gt       lt col gt       lt col width  20px  gt       lt col gt     lt  colgroup gt     lt tr gt        lt td gt data lt  td gt        lt td gt  lt  td gt        lt td gt more data lt  td gt      lt  tr gt   lt  table gt    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

User · Answer

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   lt ul gt   lt li gt  lt span class  large  gt 3 lt  span gt yr lt  li gt   lt li gt in lt br gt stall lt  li gt   lt li gt  lt span class  large  gt 9 lt  span gt x lt span class  large  gt 5 lt  span gt  lt  li gt   lt li gt on lt br gt site lt  li gt   lt li gt globe lt  li gt   lt li gt back lt br gt to hp lt  li gt   lt  ul gt    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

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt style gt  x000D  table  x000D  border-spacing  16px 4px  x000D    x000D   x000D   td   x000D      border  1px solid black  x000D    x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt table style  width 100   gt  x000D     lt tr gt  x000D       lt td gt Jill lt  td gt  x000D       lt td gt Smith lt  td gt    x000D       lt td gt 50 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Eve lt  td gt  x000D       lt td gt Jackson lt  td gt    x000D       lt td gt 94 lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt John lt  td gt  x000D       lt td gt Doe lt  td gt    x000D       lt td gt 80 lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    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

User · Answer

Try padding-right  You re not allowed to put margin s between cells    lt table gt      lt tr gt         lt td style  padding-right  10px   gt one lt  td gt         lt td gt two lt  td gt      lt  tr gt   lt  table gt

[html] CSS Cell Margin

Examples related to html

Examples related to css

Examples related to cell

Examples related to margin

Examples related to css-tables