html로 테이블 구조에 디바이더를 추가

I가 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

이 -

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>

데모를 참조하십시오! +1,하지만 난 단지 클래스를 * 한 번 * 직접 tr에 적용 시켜서 더 밀어 넣을 것입니다. 우리는 IE7이 tr 스타일로 잘 작동하지 않는다는 것을 알고 있으므로 규칙 선택기는 ** bottom-border> td **가되어야합니다. –

는 :

<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 번째 아이가 쉽게 할 수 있습니다 selector는 css와 ht를 참조하십시오. 아래 ml의 : - : http://jsfiddle.net/TfK6Z/1/

출처

2012-03-30 04:37:16

html로 테이블 구조에 디바이더를 추가

답변

관련 문제