0

I'm playing around with HTML tables, the th with colspan=3 shouldn't have border top and bottom but it does. What is the reason?

I've removed the borders all together with border: 0px solid black.

I've also created this fiddle.

Screenshots:

PS: I know tables should not be used for layouts I'm just trying to learn how tables work.

Update: I know that when I don't use border-collapse: collapse, these extra borders do not show up, but need to use border-collapse for the rest of my table.

<!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>
pjsofts
  • 170
  • 4
  • 18
  • That `` doesn’t have a border. What is the expected result? – Sebastian Simon Nov 25 '17 at 10:00
  • There is no border for me, Firefox 56.0.2. – Sebastian Simon Nov 25 '17 at 10:05
  • I've viewing on Chrome 62.0 on Windows, I've added a screenshot. – pjsofts Nov 25 '17 at 10:05
  • Added Inspect Screenshot – pjsofts Nov 25 '17 at 10:12
  • @pjsofts: I mean it's not possible to remove just `th`s border with `border-collapse: collapse`. If possible, set 1px border in the same color as background. – pavel Nov 25 '17 at 10:52
  • @panther Why do you start your sentence with "I mean"? Nice hack, but I'm looking for the reason. – pjsofts Nov 25 '17 at 10:56
  • @pjsofts: It's not general hack, just for this example with one-color background. Try to check into HTML/CSS specs, I have no time to read and find it there. When you have collapsed borders, it isn't allowed to put border to just a part of cells in table. If it's possible to change HTML markup, it's possible to find any 'clean' solution. Your HTML markup is bad for the target you want to reach. And what about my 'mean' word? Maybe there should be 'I think'? :-) – pavel Nov 25 '17 at 10:59
  • checked the specification, it says it should be possible to have partly specified borders in the collapse mode. https://www.w3.org/TR/CSS2/tables.html#borders – pjsofts Nov 25 '17 at 11:30
  • 1
    A duplicate: https://stackoverflow.com/questions/15427442/strange-behaviour-with-border-collapse-and-colspan – pjsofts Nov 25 '17 at 12:57

2 Answers2

2

try removing this: border-collapse: collapse;

ariaman5
  • 132
  • 1
  • 8
-5
<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 Product Support services about us 1 2 3   1 2 3

Robert Wade
  • 4,918
  • 1
  • 16
  • 35
Pragna
  • 470
  • 1
  • 3
  • 18