表格中两行之间的空格?

2008-12-09 html css

通过CSS可以做到吗?

我正在努力

tr.classname {
  border-spacing: 5em;
}

无济于事。也许我做错了什么?

Answers

在父表中,尝试设置

border-collapse:separate; 
border-spacing:5em;

加上边框声明,然后看是否达到您想要的效果。 但是请注意,IE不支持“分隔边框”模型。

你有没有尝试过:

tr.classname { margin-bottom:5em; }

另外,每个td也可以调整:

td.classname { margin-bottom:5em; }

要么

 td.classname { padding-bottom:5em; }

您无法更改表格单元格的边距。但是您可以更改填充。更改TD的填充,这将使单元格更大,并使用增加的填充将文本推离侧面。但是,如果您有边界线,它仍然不是您想要的。

您需要在td元素上使用填充。这样的事情应该可以解决问题。当然,您可以使用顶部填充而不是底部填充来获得相同的结果。

在下面的CSS代码中,大于号表示填充仅适用于td元素,这些元素是将子级直接指向类为spaceUnder tr元素的子元素。这将使使用嵌套表成为可能。 (示例代码中的单元格C和D。)我不太确定浏览器是否支持直接子选择器(例如IE 6),但是在任何现代浏览器中都不应破坏代码。

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}
<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

这应该呈现如下所示:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

您可以用<div />元素填充<td />元素,然后将任何边距应用于所需的div。为了在行之间提供可视空间,可以在<tr />元素上使用重复的背景图像。 (这是我今天使用的解决方案,尽管我没有对其进行任何进一步的测试,但它似乎在IE6和FireFox 3中都可以使用。)

另外,如果您不愿意修改服务器代码以将<div />放在<td />内,则可以使用jQuery(或类似方式)将<td />内容动态包装在<div / >,使您能够根据需要应用CSS。

答案来不及了:)

如果将float应用于tr元素,则可以使用margin属性在两行之间进行margin

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

好,你可以

tr.classname td {background-color:red; border-bottom: 5em solid white}

确保将背景色设置在td而非行上。这应该适用于大多数浏览器...(Chrome,即经过ff测试)

由于我在桌子后面有一个背景图片,所以用白色填充物伪装它是行不通的。我选择在内容的每一行之间放置一个空行:

<tr class="spacer"><td></td></tr>

然后使用CSS为间隔行赋予一定的高度和透明的背景。

您的表中有包含任何数据的ID相册...我省略了trs和tds

<table id="albums" cellspacing="0">       
</table>

在CSS中:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

如上所示执行此操作...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

删除垂直列对齐方式,因此请小心使用

tr { 
    display: block;
    margin-bottom: 5px;
}

或者只是在要添加间距的行之间添加空白边距高度

您可以尝试添加分隔符行:

的HTML:

<tr class="separator" />

CSS:

table tr.separator { height: 10px; }

分配表间距的正确方法是使用cellpadding和cellspacing,例如

<table cellpadding="4">

您需要设置border-collapse: separate;在桌子上;大多数浏览器默认样式表都以border-collapse: collapse;开始border-collapse: collapse; ,这会减少边框间距。

同样,边界间距:在TD ,而不在TR

尝试:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

为了营造行间距的错觉,请在行上应用背景色,然后创建带有白色的粗边框,以便创建一个“空格” :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

我在努力解决类似问题时偶然发现了这一点。我发现Varun Natraaj的答案很有帮助,但我会改用透明边框。

td { border: 1em solid transparent; }

透明边框仍具有宽度。

我意识到这是对旧线程的解答,可能不是所请求的解决方案,但是尽管所有建议的解决方案都无法满足我的需要,但该解决方案对我来说很有用。

我有2个表格单元格,一个具有背景色,另一个具有边框色。上述解决方案删除了​​边框,因此右侧的单元格似乎漂浮在空中。 解决问题的办法是用div和相应的类替换tabletrtd :table将是div id="table_replacer" ,tr将是div class="tr_replacer"而td将是div class="td_replacer" (显然也将结束标记更改为div)

为了解决我的问题,css是:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

希望这对某人有帮助。

您可以在表格中使用line-height

<table style="width: 400px; line-height:50px;">

只需将div放入td并设置以下div样式即可:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

来自Mozilla开发人员网络

border-spacing CSS属性指定相邻单元格的边框之间的距离(仅适用于分隔的边框模型)。这等效于表示性HTML中的cellspacing属性, 但是可选的第二个值可用于设置不同的水平和垂直间距。

最后一部分经常被监督。例:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

更新

我现在知道,OP希望特定的单独行具有增加的间距。我添加了一个带有tbody元素的设置,该设置可以在不破坏语义的情况下完成该任务。但是,我不确定所有浏览器是否都支持它。我是用Chrome浏览器制作的。

下面的示例用于显示如何使它看起来像表中存在单独的行,充分体现了CSS的甜味。还通过tbody设置为第一行提供了更大的间距。随时使用!

支持通知:IE8 +,Chrome,Firefox,Safari,Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}
<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

适用于2015年的大多数最新浏览器。简单的解决方案。它不适用于透明,但是与Thoronwen的答案不同,我无法获得任何尺寸的透明渲染。

    tr {
      border-bottom:5em solid white;
    }

在这里,这个工作顺利:

#myOwnTable td { padding: 6px 0 6px 0;}

我想您可以通过指定需要的td来制定更细粒度的布局。

看一下border-collapse:独立属性(默认)和border-spacing属性。

首先,必须使用border-collapse 分隔它们,然后可以使用border-spacing定义列和行之间 的空间

实际上,这两种CSS属性在每个浏览器上都得到了很好的支持, 请参见此处

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}
<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

这是一个简单而优雅的解决方案,但有一些警告:

  • 您实际上无法使间隙透明,需要给它们指定特定的颜色。
  • 您不能在间隙上方和下方的边界的圆角
  • 您需要知道表格单元格的填充和边框

考虑到这一点,请尝试以下操作:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

您实际上在做的是将矩形::before块粘贴到要在行中所有单元格的顶部加上空格的位置。这些块从单元格中伸出一点以重叠现有边界,将其隐藏。这些块只是夹在中间的顶部和底部边框:顶部边框形成间隙,底部边框重新创建单元格原始顶部边框的外观。

请注意,如果表格和单元格周围都有边框,则需要进一步增加“块”的水平-ve边距。因此,对于4px的表格边框,您可以使用:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

而且,如果您的表格使用border-collapse:separate而不是border-collapse:collapse ,那么您将需要(a)使用整个表格的边框宽度:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

...以及(b)替换现在需要在间隙下方显示的边框的双倍宽度:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

如果愿意,该技术可以轻松地应用于.gapafter版本,也可以轻松创建垂直(列)间隙而不是行间隙。

这是一个可在实际操作中查看的Codepen: https ://codepen.io/anon/pen/agqPpW

Related