html - 使用 CSS 调整表格单元格间距

标签 html css css-tables

是否可以增加单元格之间的间距?

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>test</title>
  <style>
   #wrap {
    display: table-row;
    /* there is no also cellspacing in CSS afaik :( */
   }
   #wrap div {
    display: table-cell;
    /* margin: 40px; doesn't work for table-cell :( */
    /* border: 30px solid transparent; works but it's as good as adding padding */
    /* border: 30px solid white; works but the page background is invisible */

    /* decoration: */
    background-color: green;
    padding: 20px;
   }
  </style>
 </head>
 <body>
  <!-- don't touch the markup -->
  <div id="wrap">
   <div>text1</div>
   <div>text2</div>
  </div>
 </body>
</html>

最佳答案

使用margin属性:

#wrap div {
background-color:green;
float:left;
margin:10px;
padding:20px;
}

如果这不是您想要实现的目标,请告诉我,以便我提供帮助。

编辑:另一种方法是这样做:

#wrap {
border-spacing:20px;
display:inline-table;
}

但请注意,并非所有浏览器都完全支持 border-spacing(IE6 和 IE7 不支持)。

关于html - 使用 CSS 调整表格单元格间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2522112/

相关文章:

css - Firefox 在加载 mvc razor 页面时错误地显示元素,select2 js

html - 垂直对齐两个图像和一些多行文本

html - 响应式 4x4 CSS 网格

javascript - 我的 HTML 代码出错

html - 在 chrome 和 safari 中替代宽度 :""

css - 将一个 div 粘贴到表格单元格 div 的底部

css - Bootstrap 狭窄的营销 + 合理的导航?

jquery - 使用 JQuery 验证时有效地插入一个 Div

javascript - -webkit-溢出-滚动 : auto; not working on touch devices

javascript - 在 SVG 中嵌入 javascript 和 CSS