Extra Grenzen für th

Ich spiele mit HTML-Tabellen, die th mit colspan=3 sollte nicht Grenze oben und unten haben, aber es tut. Was ist der Grund?Extra Grenzen für th

Ich habe die Grenzen alle zusammen mit border: 0px solid black entfernt.

Ich habe auch diese fiddle erstellt.

Screenshots:

PS: Ich weiß Tabellen sollten nicht für Layouts verwendet werden, ich bin einfach nur versuchen zu lernen, wie Tabellen funktionieren.

Update: Ich weiß, dass, wenn ich border-collapse: collapse nicht verwenden, diese zusätzlichen Grenzen nicht zeigen, sondern muß border-collapse für den Rest meiner Tabelle verwenden.

<!doctype html> 
<html> 
<head> 
<style> 
html,body {height: 100%; 
    margin:0; 
    padding: 0px; 
    } 
table {width: 100%; 
    height: 100%; 
    } 
table, td, th, .box{ border:0px solid black; 
    border-collapse: collapse; 
    padding: 0; 
    } 
.main {width: 980px; 
    margin: 0px auto; 
    border-width: 1px;} 
/* header */ 
.main .header { height: 150px; 
    border-bottom-width: 1px;} 
.main .header td{ width: 150px; 
    vertical-align: top;} 
.main .header td img {float: right;} 
.main .header td img[src*='flag'] {margin: 5px 3px 0px 4px;} 

/* header */ 
/* Nav */ 
.main .nav { 
    height: 32px; 
    border-bottom-width: 1px;} 
.main .nav th { 
    width: 25%; 
    border-right-width: 1px; 
} 
.main .nav th:nth-last-child(1) { 
    border-right-width: 0px; 
} 
.main .nav th:first-letter{ text-transform: uppercase; 
color: red;} 
.main .nav th:hover { background-color: black; 
       color:white;} 

/* Content */ 
.main .Content { 
    padding: 70px 130px 20px; 
}    
.main .Content td { 
    width: 300px; 
    height: 300px; 
    border-width: 1px; 
} 
</style> 
</head> 
<body> 
    <table class="main"> 
     <tr> 
      <td class="header"> 
       <table> 
        <tr> 
         <td><img src="image/logo.jpg"></td> 
         <th>Site Name</th> 
         <td><img src="image/flag-nl.png" /><img src="image/flag-us.png" /></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td class="nav"> 
       <table> 
        <th>Product</th> 
        <th>Support</th> 
        <th>services</th> 
        <th>about us</th>     
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td class="Content"> 
       <table> 
        <tr> 
         <td>1</td> 
         <th>2</th> 
         <td>3</td> 
        </tr> 
        <tr><th colspan="3">&nbsp;</th></tr> 
        <tr> 
         <td>1</td> 
         <th>2</th> 
         <td>3</td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</body> 
</html> 
</pre>

Quelle

2017-11-25 pjsofts

Das '' keine Grenze haben. Was ist das erwartete Ergebnis? – Xufox

Es gibt keine Grenze für mich, Firefox 56.0.2. – Xufox

Ich habe auf Chrome 62.0 unter Windows gesehen, ich habe einen Screenshot hinzugefügt. – pjsofts

-4

<html> 
    <head> 
    <style> 
     html, body { 
     height: 100%; 
     margin:0; 
     padding: 0px; 
     } 
     table { 
     width: 100%; 
     height: 100%; 
     } 
     table, td, .box { 
     border:0px solid black; 
     border-collapse: collapse; 
     padding: 0; 
     } 
     .main { 
     width: 980px; 
     margin: 0px auto; 
     border-width: 1px; 
     border: none; 
     } 
     /* header */ 
     .main .header { 
     height: 150px; 
     border-bottom-width: 1px; 
     } 
     .main .header td { 
     width: 150px; 
     vertical-align: top; 
     } 
     .main .header td img { 
     float: right; 
     } 
     .main .header td img[src*='flag'] { 
     margin: 5px 3px 0px 4px; 
     } 

     /* header */ 
     /* Nav */ 
     .main .nav { 
     height: 32px; 
     border-bottom-width: 1px;} 
     .main .nav th { 
     width: 25%; 
     border-right-width: 1px; 
     } 
     .main .nav th:nth-last-child(1) { 
     border-right-width: 0px; 
     } 
     .main .nav th:first-letter{ text-transform: uppercase; 
     color: red; 
     } 
     .main .nav th:hover { background-color: black; 
     color:white; 
     } 

     /* Content */ 
     .main .Content { 
     padding: 70px 130px 20px; 
     } 
     .main .Content td { 
     width: 300px; 
     height: 300px; 
     border-width: 1px; 
     } 
     .nav .Content tr { 
     border: 1px solid black; 
     } 
    </style> 
</head>

Site Name Produkt Unterstützung Dienste Abou t uns

Quelle

2017-11-25 10:04:03 Pragya

Eigentlich , nicht. – pjsofts

Aufgrund der css von border-bottom-width für .main .header und .main .nav, Der Rahmen wird nicht ausgeblendet – Pragya

Entfernen Sie jede Erklärung und lassen Sie nur einen Block Code tatsächlich Ihre Antwort noch schlimmer. – Xufox

versuchen Entfernen dieses: border-collapse: collapse; es

Quelle

2017-11-25 10:12:34 ariaman5

* Meine Antwort ist gleich, das funktioniert + 1 * – Pedram

Ich frage mich, was ist der Grund! – pjsofts

Ich muss für den Rest der Tabelle Grenz-Kollaps verwenden. – pjsofts

dieses border-collapse entfernen und versuchen

border-collapse: collapse;

Quelle

2017-11-25 10:19:57

Dies wurde bereits beantwortet. – Xufox

Extra Grenzen für th

Antwort

Verwandte Themen