blocks|key|350369|text|表行不能有边距值。你能增加填充物吗？这样就行了。否则，您可以在class="highlighted"行之前和之后插入<tr+class="spacer"></tr>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|350370|entityMap^0|V|J|1M|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Table rows cannot have margin values. Can you increase the padding? That would work. Otherwise you could insert a <code>&lt;tr class="spacer"&gt;&lt;/tr&gt;</code> before and after the <code>class="highlighted"</code> rows.</p>


blocks|key|566411|text|您不能设置突出显示s本身的样式，但可以为“<tr>”<tr>s内的<td>s设置样式，如下所示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|566412|tr.highlight+td+{padding-top:+10px;+padding-bottom:10px}|code-block|syntax|javascript|566413|entityMap^0|L|4|Q|4|X|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

<p>You can't style the <code>&lt;tr&gt;</code>s themselves, but you can give the <code>&lt;td&gt;</code>s inside the "highlight" <code>&lt;tr&gt;</code>s a style, like this</p>

<pre><code>tr.highlight td {padding-top: 10px; padding-bottom:10px}
</code></pre>


blocks|key|350506|text|您可以尝试使用CSS转换来缩进整个tr：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|350507|tr.indent+{
+++-webkit-transform:+translate(20px,0);
+++-moz-transform:+translate(20px,0);
}|code-block|syntax|javascript|350508|我认为这是一个有效的解决方案。在我的OSX上，火狐16，Chrome+23和Safari+6似乎都运行得很好。|350509|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You might try to use CSS transforms for indenting a whole tr:</p>

<pre><code>tr.indent {
   -webkit-transform: translate(20px,0);
   -moz-transform: translate(20px,0);
}
</code></pre>

<p>I think this is a valid solution. Seems to work fine in Firefox 16, Chrome 23 and Safari 6 on my OSX. </p>


blocks|key|350558|text|这是我做的一种很好的方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|350559|table+tr+{
++++border-bottom:+4px+solid;
}|code-block|syntax|javascript|350560|这将在每行之间添加垂直间距的4px。如果你不想得到最后一个孩子的边界：|offset|length|style|CODE|350561|table+tr:last-child+{
++++border-bottom:+0;
}|350562|请注意，CSS3伪选择器只能在IE+8及更低版本中使用selectivizr。|350563|entityMap^0|0|0|E|3|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Here's a neat way I did it:</p>

<pre><code>table tr {
    border-bottom: 4px solid;
}
</code></pre>

<p>That will add <code>4px</code> of vertical spacing between each row.  And if you wanted to not get that border on the last child:</p>

<pre><code>table tr:last-child {
    border-bottom: 0;
}
</code></pre>

<p>Reminder that CSS3 pseudo-selectors will only work in IE 8 and below with selectivizr.</p>


blocks|key|566548|text|行高可以是可能的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|566549|tr
{
++++line-height:30px;
}|code-block|syntax|javascript|566550|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>line-height can be the possible solution</p>

<pre><code>tr
{
    line-height:30px;
}
</code></pre>


blocks|key|350667|text|将此样式添加到class=“突出显示”填充底部之前，并显示为inline-table|type|unstyled|depth|inlineStyleRanges|entityRanges|data|350668|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>add this style before the class="highlighted"
padding-bottom and
display is inline-table</p>


blocks|key|350691|text|向要添加额外间距的单元格添加div：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|350692|<tr+class="highlight">
+<td><div>Value1</div></td>
+<td><div>Value2</div></td>
</tr>
tr.highlight+td+div+{
margin-top:+10px;
}|code-block|syntax|javascript|350693|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>add a div to the cells that you would like to add some extra spacing:</p>

<pre><code>&lt;tr class="highlight"&gt;
 &lt;td&gt;&lt;div&gt;Value1&lt;/div&gt;&lt;/td&gt;
 &lt;td&gt;&lt;div&gt;Value2&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
tr.highlight td div {
margin-top: 10px;
}
</code></pre>


blocks|key|350742|text|我知道这有点老了，但我只是得到了一些相同的东西来工作。你不能这么做吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|350743|tr.highlight+{
++++border-top:+10px+solid;
++++border-bottom:+10px+solid;
++++border-color:+transparent;
}|code-block|syntax|javascript|350744|希望这能有所帮助。|350745|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I know this is kind of old, but I just got something along the same lines to work.  Couldn't you do this?</p>

<pre><code>tr.highlight {
    border-top: 10px solid;
    border-bottom: 10px solid;
    border-color: transparent;
}
</code></pre>

<p>Hope this helps.</p>


blocks|key|350832|text|另一种可能是使用伪选择器:after或:before|type|unstyled|depth|inlineStyleRanges|entityRanges|data|350833|tr.highlight+td:last-child:after
{
++content:+"\0a0";
++line-height:+3em;
}|code-block|syntax|javascript|350834|这可能会避免浏览器不理解伪选择器的问题，而且背景颜色也不是问题。|350835|然而，缺点是，它在最后一个单元格之后添加了一些额外的空格。|350836|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Another possibility is to use a pseudo selector :after or :before</p>

<pre><code>tr.highlight td:last-child:after
{
  content: "\0a0";
  line-height: 3em;
}
</code></pre>

<p>That might avoid issues with browser that don't understand the pseudo selectors, plus background-colors are not an issue.</p>

<p>The downside is however, that it adds some extra whitespace after the last cell.</p>


blocks|key|350889|text|我放弃了，插入了一个简单的jQuery代码，如下所示。这将在每个tr之后添加一个tr，如果您有这么多像我这样的tr。演示：https://jsfiddle.net/acf9sph6/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|350890|<table>
++<tbody>
+++++<tr+class="my-tr">
++++++++<td>one+line</td>
+++++</tr>
+++++<tr+class="my-tr">
++++++++<td>one+line</td>
+++++</tr>
+++++<tr+class="my-tr">
++++++++<td>one+line</td>
+++++</tr>
++</tbody>
</table>
<script>
$(function+()+{
+++++++$("tr.my-tr").after('<tr+class="tr-spacer"/>');
});
</script>
<style>
.tr-spacer
{
++++height:+20px;
}
</style>|code-block|syntax|javascript|350891|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/acf9sph6/^0|1P|U|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>I gave up and inserted a simple jQuery code as below. This will add a tr after every tr, if you have so many trs like me.
Demo: <a href="https://jsfiddle.net/acf9sph6/" rel="nofollow">https://jsfiddle.net/acf9sph6/</a></p>

<pre><code>&lt;table&gt;
  &lt;tbody&gt;
     &lt;tr class="my-tr"&gt;
        &lt;td&gt;one line&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr class="my-tr"&gt;
        &lt;td&gt;one line&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr class="my-tr"&gt;
        &lt;td&gt;one line&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
&lt;script&gt;
$(function () {
       $("tr.my-tr").after('&lt;tr class="tr-spacer"/&gt;');
});
&lt;/script&gt;
&lt;style&gt;
.tr-spacer
{
    height: 20px;
}
&lt;/style&gt;
</code></pre>


blocks|key|566878|text|给出表格行之间的边距外观的一个技巧是给它们一个与背景颜色相同的边框。这在设置第三方主题的样式时非常有用，因为您不能更改html标记。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|566879|tr{+
++++border:+5px+solid+white;
}|code-block|syntax|javascript|566880|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A hack to give the appearance of margins between table rows is to give them a border the same color as the background. This is useful when styling a 3rd party theme where you can't change the html markup. Eg:</p>

<pre><code>tr{ 
    border: 5px solid white;
}
</code></pre>


blocks|key|566948|text|在行上模拟边距的一种方法是使用伪选择器在td上添加一些间距。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|566949|.highlight+td::before,+.highlight+td::after
{
++content:"";
++height:10px;
++display:block;
}|code-block|syntax|javascript|566950|这样，任何标记了高亮显示类的内容都将被顶部和底部分开。|566951|https://jsfiddle.net/d0zmsrfs/|566952|entityMap|0|LINK|mutability|MUTABLE|url^0|K|2|0|0|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|N]]]]

<p>A way to mimic the margin on the row would be to use the pseudo selector to add some spacing on the <code>td</code>.</p>

<pre><code>.highlight td::before, .highlight td::after
{
  content:"";
  height:10px;
  display:block;
}
</code></pre>

<p>This way anything marked with the highlight class will be separated top and bottom.</p>

<p><a href="https://jsfiddle.net/d0zmsrfs/" rel="noreferrer">https://jsfiddle.net/d0zmsrfs/</a></p>


blocks|key|351013|text|值得注意的是，我利用了已经在使用bootstrap+(4.3)的优势，因为我需要在行中添加边距、框阴影和边界半径，这是我不能使用表做的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|351014|<div+id="loop"+class="table-responsive+px-4">
<section>
++++<div+id="thead"+class="row+m-0">
++++++++<div+class="col"></div>
++++++++<div+class="col"></div>
++++++++<div+class="col"></div>
++++</div>
++++<div+id="tbody"+class="row+m-0">
++++++++<div+class="col"></div>
++++++++<div+class="col"></div>
++++++++<div+class="col"></div>
++++</div>
</section>
</div>|code-block|syntax|javascript|351015|在css上，我添加了几行代码来管理bootstrap的表行为|351016|@media+(max-width:+800px){
++++#loop{
++++++++section{
++++++++++++min-width:+700px;
++++++++}
++++}
}|351017|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>For what is worth, I took advantage that I was already using bootstrap (4.3), because I needed to add margin, box-shadow and border-radius to my row, something I can't do with tables.</p>

<pre><code>&lt;div id="loop" class="table-responsive px-4"&gt;
&lt;section&gt;
    &lt;div id="thead" class="row m-0"&gt;
        &lt;div class="col"&gt;&lt;/div&gt;
        &lt;div class="col"&gt;&lt;/div&gt;
        &lt;div class="col"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="tbody" class="row m-0"&gt;
        &lt;div class="col"&gt;&lt;/div&gt;
        &lt;div class="col"&gt;&lt;/div&gt;
        &lt;div class="col"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;
</code></pre>

<p>On css I added a few lines to mantain the table behavior of bootstrap</p>

<pre><code>@media (max-width: 800px){
    #loop{
        section{
            min-width: 700px;
        }
    }
}
</code></pre>


<p>I have a table containing many rows. Some of these rows are <code>class="highlight"</code> and signify a row that needs to be styled differently and highlighted. What I'm trying to do is add some extra spacing before and after these rows so they appear slightly separated from the other rows. </p>

<p>I thought I could get this done with <code>margin-top:10px;margin-bottom:10px;</code> but it's not working. Anyone knows how to get this done, or if it could be done? Here's the HTML and I've set the 2nd tr in the tbody to class highlight.</p>

<pre><code>&lt;table&gt;
&lt;thead&gt;
  &lt;tr&gt;
     &lt;th&gt;Header 1&lt;/th&gt;
     &lt;th&gt;Header 2&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
  &lt;tr&gt;
     &lt;td&gt;Value1&lt;/td&gt;
     &lt;td&gt;Value2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="highlight"&gt;
     &lt;td&gt;Value1&lt;/td&gt;
     &lt;td&gt;Value2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;Value1&lt;/td&gt;
     &lt;td&gt;Value2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;Value1&lt;/td&gt;
     &lt;td&gt;Value2&lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>


How to add a margin to a table row <tr>

我有一个包含许多行的表。其中一些行是class="highlight"，表示需要以不同的方式设置样式并突出显示的行。我想做的是在这些行之前和之后添加一些额外的间距，以便它们看起来与其他行稍微分开。我以为我可以用margin-top:10px;margin-bottom:10px;解决这个问题，但是它不起作用。有谁知道如...

问如何向表格行添加边距<tr>
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向表格行添加边距<tr>EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向表格行添加边距<tr>
EN