相关疑难解决方法(0)

我有div彼此相邻的元素display: table-cell;.

我想margin在它们之间设置,但margin: 5px没有效果.为什么？

我的代码:

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

以下html按预期工作,除了margin-top被表行div完全忽略.我无法弄清楚原因.

<div class='table'>

  <div class='margin-top5 row user' id='user_113'>
    <div class='cell left avatar margin-right5'><img alt="Blank_avatar_thumb" src="/images/blank_avatar_thumb.png?1295354025" /></div>
    <div class='cell left'>
      <div class='bold'><a href="/voisins/113">Dandre</a></div>
      <div class='small of_hidden'>toothpicking, veryveryveryveeerrrryyyyyylooooooooong, kidnapping...</div>
    </div>
    <div class='cell right'>42</div>

    <div class='clear'></div>
  </div>
  /* more rows */
</div>

CSS:

div.table {
  display: table;
  width: 100%;
}
div.row {
  display: table-row;
}
div.cell {
  display: table-cell;
}
div.left {
  float: left;
}
div.right {
  float: right;
}
div.clear {
  clear: both;
}
.avatar {
  vertical-align: middle;
}
.margin-top5 {
  margin-top: …

我想在HTML表格页眉和页脚之间留出一点空间,以及我的正文内容.虽然margin-top和margin-bottom会这样做,但事实并非如此.然而字体重量:粗体; 指令被考虑在内.

我的HTML:

<table id="myTbl">
   <thead>
     <tr>
       <th>My Table Header</th>
     </tr>
   </thead>  
   <tbody>
    <tr>
      <td>My Body Content</td>
    </tr>
    </tbody>
   <tfoot>
     <tr>
       <th>My Table Footer</th>
     </tr>
   </tfoot>  
</table>

我的CSS:

#myTbl {
    font-weight: normal;
}

#myTbl thead {
    font-weight: bold;
    margin-bottom: 10px;
}

#myTbl tfoot {
    font-weight: bold;
    margin-top: 10px;
}

JSFiddle可以在这里找到.我正在使用Chrome.

我设置一个父div显示:table及其显示的三个子div:inline-cell.这三个子div是水平堆叠的,我在三个子div上设置了三个像素的边框.我如何在子div之间添加边距,以便将空间放在边框外部而不是内部？

我想知道为什么图像不拉伸整个表格单元格？

这是代码：

<td width="110" height="100" style="margin: 0; padding: 0; border: 1px solid rgb(0, 174, 239); background-color: #00FF00">
    <a target="_blank" href="http://mymed.com/provider.aspx?id=2611" xt="SPCLICKSTREAM" name="Kamin_1"><img style="width: 100%; height: 100%; display: inline-block;" alt="s, kam, MD" border=0 src="http://mymed.com/images/email/Physicians/Kaminski.jpg" name="Cont_19" /></a>
</td>

我有2个div display: table-cell.我需要他们之间的空间.

margin-left: 5px 对于第二个div不起作用.

我已经看到了为什么一个div有"display:table-cell;" 不受保证金影响？回答,但我的问题不是关于如何在一个单元格周围设置边框,而是一个左边缘(而不是填充!)用于具体单元格(右边的)

将绿色div设置为

display: table;
border-collapse: separate;
border-spacing: 10px;

不仅在细胞之间,而且在细胞周围都有空间,这就是NOK ...

如何进行？

JSFiddle:http://jsfiddle.net/9cw7rhpu/