添加分隔到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表結構

回答

相關問題