CODEWITHSUNDEEP
htmlcss
Loggi
Loggi

Reputation: 35

Table with rowspan has no Border

I am using Firefox. I have the following code:

html,
body {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding-left: 20px;
  padding-right: 20px;
}


.visitentabelle {
  border: 2px solid black;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.visitentabelle tr {
  height: 50px;
  line-height: 50px;
}

.visitentabelle tr:not(:last-child) {
  border-bottom: 1px solid black;
}

.visitentabelle .rowgroup {
  writing-mode: vertical-rl;
  text-align: center;
  vertical-align: middle;
  transform: rotate(180deg);
  border-right: 1px solid black;
  width: 30px;
  line-height: 30px;
  font-size: 20px;
}

.visitentabelle td {
  text-align: left;
  padding-left: 10px;
}
<html>

  <body id="body">
    <table class="visitentabelle">
      <tr>
        <th rowspan="6" class="rowgroup"><span>SomeHeader</span></th>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
    </table>
  </body>

</html>

JSFiddle available here

As you can see I defined a border for the whole table, yet my header row is missing the bottom border. I want to put a border there aswell.

What am I doing wrong?

Thanks in advance.

Upvotes: 2

Views: 4606

Answers (3)

dhruva bhayani
dhruva bhayani

Reputation: 11

Try this code:

CSS:

html,
body {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding-left: 20px;
  padding-right: 20px;
}


.visitentabelle {
  border: 2px solid black;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.visitentabelle tr {
  height: 50px;
  line-height: 50px;
}

.visitentabelle tr:not(:last-child) {
  border-bottom: 1px solid black;
}

.visitentabelle .rowgroup {
  writing-mode: vertical-rl;
  text-align: center;
  vertical-align: middle;
  transform: rotate(180deg);
  border-right: 1px solid black;
  width: 50px;
  line-height: 30px;
  font-size: 20px;
}

.visitentabelle td {
  text-align: left;
  padding-left: 10px; 
}
        td .rowgroup{border-bottom:1px solid #000;}
        .visitentabelle td:last-child{padding-left:0;}
        .testgroup table tr td{padding-left:10px; border-bottom:1px solid #000;}

HTML: 

<body id="body">
    <table class="visitentabelle" cellpadding="0" cellspacing="0">
     <tr>
        <td class="rowgroup">
            <span>SomeHeader</span>
        </td>
        <td class="testgroup">
            <table width="100%" cellpadding="0" cellspacing="0" class="inner-table">
                <tr>
                    <td> Test</td>
                </tr>
                <tr>
                    <td> Test</td>
                </tr>
                <tr>
                    <td> Test</td>
                </tr>
                <tr>
                    <td> Test</td>
                </tr>
                <tr>
                    <td> Test</td>
                </tr>
            </table>
        </td>
     </tr>
    </table>
  </body>

Upvotes: 1

skobaljic
skobaljic

Reputation: 9614

Your vertical header rowspan is wrong, should be 5, check it below:

.visitentabelle {
    border: 2px solid black;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.visitentabelle tr {
    height: 50px;
    line-height: 50px;
}

.visitentabelle tr:not(:last-child) {
    border-bottom: 1px solid black;
}

.visitentabelle .rowgroup {
    writing-mode: vertical-rl;
    text-align: center;
    vertical-align: middle;
    transform: rotate(180deg);
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    width: 30px;
    line-height: 30px;
    font-size: 20px;
}

.visitentabelle td {
    text-align: left;
    padding-left: 10px;
}
<table class="visitentabelle">
    <tr>
        <th rowspan="5" class="rowgroup"><span>SomeHeader</span></th>
        <td colspan="6">test</td>
    </tr>
    <tr>
        <td colspan="6">test</td>
    </tr>
    <tr>
        <td colspan="6">test</td>
    </tr>
    <tr>
        <td colspan="6">test</td>
    </tr>
    <tr>
        <td colspan="6">test</td>
    </tr>
</table>

Also on JSFiddle.

Upvotes: 1

mindmaster
mindmaster

Reputation: 1888

Your problem is here:

.visitentabelle tr:not(:last-child) {
  border-bottom: 1px solid black;
}

Basically your saying to not border the last-child, which is the last element of your tr. You can simply fix it by changing it to:

.visitentabelle tr {
  border-bottom: 1px solid black;
}

Check the code below :) Hope i could help :)

html,
body {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding-left: 20px;
  padding-right: 20px;
}


.visitentabelle {
  border: 2px solid black;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.visitentabelle tr {
  height: 50px;
  line-height: 50px;
}

.visitentabelle tr {
  border-bottom: 1px solid black;
}


.visitentabelle .rowgroup {
  writing-mode: vertical-rl;
  text-align: center;
  vertical-align: middle;
  transform: rotate(180deg);
  border-right: 1px solid black;
  width: 30px;
  line-height: 30px;
  font-size: 20px;
}

.visitentabelle td {
  text-align: left;
  padding-left: 10px;
}
<html>

  <body id="body">
    <table class="visitentabelle">
      <tr>
        <th rowspan="6" class="rowgroup"><span>SomeHeader</span></th>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
    </table>
  </body>

</html>

Upvotes: 0

Related Questions