添加分隔到HTML表结构

我在MSIE8以下设置：添加分隔到HTML表结构

<table class="my-info"> 
    <tbody> 
     <tr> 
      <td class="info-left">First name:</td> 
      <td class="info-highlight">FirstName</td> 
     </tr> 
     <tr> 
      <td class="info-left">Surname:</td> 
      <td class="info-highlight">Surname</td> 
     </tr> 
     <tr> 
      <td class="info-left">Email:</td> 
      <td class="info-highlight">TheEmail</td> 
     </tr> 
    </tbody> 
</table>

什么我以后是把像姓之间的斜角线/虚线或只是一个线的手段，电子邮件。

我已经尝试过<hr />里面，但间距的顶部和底部太多了。

希望有人能帮助这个。希望它看起来整洁而紧凑。

谢谢。

来源

2012-03-30 tonyf

我可能会做这样的事情。当然，我是边界崩溃的狂热粉丝。

/CSS/

.my-info {border-collapse: collapse;} 
.bottom-border { border-bottom: 1px dashed black; }

/HTML/

<table class="my-info"> 
    <tbody> 
    <tr> 
     <td class="info-left">First name:</td> 
     <td class="info-highlight">FirstName</td> 
    </tr> 
    <tr> 
     <td class="info-left bottom-border">Surname:</td> 
     <td class="info-highlight bottom-border">Surname</td> 
    </tr> 
    <tr> 
     <td class="info-left">Email:</td> 
     <td class="info-highlight">TheEmail</td> 
    </tr> 
    </tbody> 
</table>

/的jsfiddle/ http://jsfiddle.net/wHmyx/

来源

2012-03-30 03:15:26 jeremysawesome

此！ +1，但我会进一步推进它只有类应用*一次*直接tr。我们都知道IE7不能很好地使用tr样式，所以规则选择器应该变成**。bottom-border> td ** – 2012-03-30 04:19:35

可能：

<tr> 
     <td class="info-left">Surname:</td> 
     <td class="info-highlight">Surname</td> 
    </tr> 
    <tr> 
     <td colspan="2" class="divider"><hr /></td> 
    </tr> 
    <tr> 
     <td class="info-left">Email:</td> 
     <td class="info-highlight">TheEmail</td> 
    </tr>

来源

2012-03-30 03:04:09 iambriansreed

嗨，你可以通过CSS第n个孩子很容易做到这一点选择器见css和ht下面毫升 -

CSS

.my-info td{ 
    padding:2px; 
} 

.my-info tr:nth-child(2) { 
    border-bottom:solid 1px black; 
}

HMTL

<table class="my-info"> 
<tbody> 
    <tr> 
     <td class="info-left">First name:</td> 
     <td class="info-highlight">FirstName</td> 
    </tr> 
    <tr> 
     <td class="info-left">Surname:</td> 
     <td class="info-highlight">Surname</td> 
    </tr> 
    <tr> 
     <td class="info-left">Email:</td> 
     <td class="info-highlight">TheEmail</td> 
    </tr> 

</tbody>

看到演示： - http://jsfiddle.net/TfK6Z/1/

来源

2012-03-30 04:37:16

添加分隔到HTML表结构

回答

相关问题