HTML 표 테두리

테두리가 설정되어 있지 않아도 테이블에 선이 표시되어 있으며 0으로 설정되어 있습니다. Gyazo.com 링크와 코드는 아래에 나와 있습니다.HTML 표 테두리

http://gyazo.com/661ce70e62c77e882f85b02c4d330316 (페이지의 스크린 샷) 나는 현재 Windows 7 및 8에 크롬의 최신 버전을 사용하고

<style type="text/css"><!-- 
table.affs td { background-color: white; margin: 12px 12px 12px 12px; padding: 25px 25px 25px 25px; } table.affs { border-collapse: separate; border-spacing: 10px; *border-collapse: expression('separate', cellSpacing = '15px'); } 
--></style> 
<table class="affs" style="background-color: #ffffff;" width="700px" border="0" cellspacing="2"> 
<tbody> 
<tr> 
<td><a href="http://www.kia.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/kia.PNG" /></a></td> 
<td><a href="http://www.google.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/google.png" /></a></td> 
<td><a href="http://www.youtube.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/youtube.png" /></a></td> 
<td><a href="http://www.nike.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/nike.png" /></a></td> 
</tr> 

<tr> 
<td><a href="http://www.jaguarpc.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/jagpc.png" /></a></td> 
<td><a href="http://www.duxter.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/duxter.png" /></a></td> 
<td><a href="http://www.sixpackshortcuts.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/sps.png" /></a></td> 
<td><img src="http://www.squareone.co/images/affiliates/baeza-grey.png" href="" /></td> 
</tr> 

<tr> 
<td><img src="http://www.squareone.co/images/affiliates/dani.png" href="" /></td> 
<td><img src="http://www.squareone.co/images/affiliates/roton-grey.png" href="" /></td> 
<td><img src="http://www.squareone.co/images/affiliates/talib-grey.png" href="" /></td> 
</tr> 
</tbody> 
</table>

, 나는 또한 각각 Windows 7 및 8에서 IE 9 텐에 그것을 시도 . 또한 Safari의 Mac OS X Lion에서 Chrome을 & Chrome에서 테스트했습니다. 왜 그렇게하는지 확신 할 수 없습니다.

출처

2013-05-03 user2348450

당신은 CSS 코드를 제공 할 수 있습니까? – sylwia

일부 이미지 주위에 테두리가 표시되지만 IE 10 및 Chrome 26 : http://jsfiddle.net/SvbKt/에서 테이블이 정상적으로 보입니다. 비 관련이지만'href'는 HTML 4 또는 5에서 유효한'img' 속성이 아닙니다. –

감사합니다. – user2348450

이 예에서는 표 형식 데이터의 경우 <table>을 사용하지 않고 레이아웃의 경우에만 사용합니다. 테이블 형식에 대한 정확한 규칙은 구현에 따라 다르기 때문에 레이아웃 문제가 발생합니다. 다른 그림을 추가하면 예제가 CSS float의 좋은 예입니다. 당신은 용감 느낌이 있다면, 당신은 또한 CSS3 테이블을 시도 할 수

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    #container {overflow: hidden; width: 300px; padding: 0;} 
    .element {height: 100px; width: 100px; float: left; padding: 0; margin: 0;} 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div class="element" style="background-color: #f00;">1</div> 
     <div class="element" style="background-color: #ff0;">2</div> 
     <div class="element" style="background-color: #f0f;">3</div> 
     <div class="element" style="background-color: #0f0;">4</div> 
     <div class="element" style="background-color: #0ff;">5</div> 
     <div class="element" style="background-color: #00f;">6</div> 
    </div> 
</body> 
</html>

하지만,이는 아직 널리 플로트로 구현되지 않습니다 : 그것은 다음과 같이 작동합니다. 의미 상으로는 더 정확하지만, 여전히 테이블의 다른 단점은 다른 용도로 오용되고 있습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    #container { display: table; } 
    .line { display: table-row; } 
    .element { display: table-cell; height: 100px; width: 100px;} 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div class="line"> 
      <div class="element" style="background-color: #f00;">1</div> 
      <div class="element" style="background-color: #ff0;">2</div> 
      <div class="element" style="background-color: #f0f;">3</div> 
     </div> 
     <div class="line"> 
      <div class="element" style="background-color: #0f0;">4</div> 
      <div class="element" style="background-color: #0ff;">5</div> 
      <div class="element" style="background-color: #00f;">6</div> 
     </div> 
    </div> 
</body> 
</html>

이 방법이 도움이되지 않는다면 크롬 개발자 도구에서 불필요한 테두리 또는 약간의 여백을 통해 빛나는 배경을 확인하십시오.

출처

2013-05-04 21:39:06 escitalopram

HTML 표 테두리

답변

관련 문제