发表新帖
发表新帖

CSS Cell Margin

后端 未结
关注
16 1273
长情又很酷
长情又很酷 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 03:16

    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>
    0 讨论(0)
  • 故里飘歌
    2020-11-29 03:24

    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.

    0 讨论(0)
  • 逝去的感伤
    2020-11-29 03:24 

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

    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.

    0 讨论(0)
  • 栀梦
    2020-11-29 03:24

    You can use both of them:

    padding-right:10px;

padding-right:10%;

    But it's better to use with %.

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