发表新帖
发表新帖

CSS Cell Margin

后端 未结
关注
16 1272
长情又很酷
长情又很酷 2020-11-29 02:18

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 \"

相关标签:
16条回答
  • 时光取名叫无心
    2020-11-29 02:59

    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...

    0 讨论(0)
  • 猫巷女王i
    2020-11-29 03:01

    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.

    0 讨论(0)
  • 春和景丽
    2020-11-29 03:02

    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>
    0 讨论(0)
  • 既然无缘
    2020-11-29 03:02

    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.

    0 讨论(0)
  • 深忆病人
    2020-11-29 03:03

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

    table { 
           border-collapse: separate;
           border-spacing: 2px;
}
    0 讨论(0)
  • 一整个雨季
    2020-11-29 03:05

    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>

    0 讨论(0)
 看不清?
提交回复
热议问题