Tables lacking borders where rowspans are present

I'm currently using Firefox and have the following code snippet:

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>

Check out the JSFiddle here

In my code, I have set a border for the entire table but noticed that the header row is missing the bottom border. I would like to add a border there as well.

Could someone please point out what I am doing wrong?

Thank you in advance.

htmlcss

Answer №1

Your vertical header rowspan is incorrect, it should be set to 5, please review the code snippet 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>

For more details, visit this example on JSFiddle.

Answer №2

Here's a code snippet for creating a table with vertical headers using CSS:

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>

Answer №3

Looks like the issue is here:

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

Essentially, you are excluding the last child of each tr from getting a bottom border. To fix this, simply update it to:

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

Take a look at the corrected code below :) I hope this resolves your problem :)

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

closing the space between rows at the top

Having trouble adjusting the top margin to match the left and right margins between items. How can I narrow the top gap so it aligns with the spacing of each bootstrap button? https://i.stack.imgur.com/1dZEC.jpg html <div ng-controller="RecipeCo ...

csstwitter-bootstrap

Overlay text on top of image with fading transparency when hovering over it

Is there a way to make the transparent layer that appears when hovering over an image on a card only cover the image itself and not extend onto the footer of the card? Currently, the image on the card covers most of it, and I want the hover overlay to beh ...

htmlcssimage

Web browser local storage

Looking to store the value of an input text box in local storage when a button is submitted <html> <body action="Servlet.do" > <input type="text" name="a"/> <button type="submit"></button> </body> </html> Any sug ...

javascriptjqueryhtmllocal-storage

The console is displaying the array, but it is not being rendered in HTML format in AngularJS

Can you please review my App.js file and let me know if there are any mistakes? I have provided the necessary files index.html and founditemtemplate.html below. Although it is returning an array of objects in the console, it is not displaying them as inten ...

javascripthtmlangularjs

Oops! Smarty encountered a fatal error that wasn't caught

An error occurred while processing the template file "C:\xampp\htdocs\eventos\libs\templates\teste.tpl" on line 9. The error message states: Fatal error: Uncaught exception 'SmartyCompilerException' with message &apo ...

phphtmlsmarty

Get rid of any fonts that are causing rendering delays on amp pages

Encountering issues with Google Lighthouse and AMP Pages I have attempted various solutions but none seem to be working <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700,900&display=swap ...

htmlcssfontsamp-htmllighthouse

React component is unable to identify prop

I'm attempting to send an array of objects from the main App.js file to a smaller component using props. However, for some reason, the prop is not being recognized within the smaller component file. https://i.stack.imgur.com/WuyFr.png https://i.stac ...

javascripthtmlcssnode.jsreactjs

Finding a specific element within a table using xpath in selenium proved to be a challenge

I am trying to click on a specific button inside a table where each row has an update button. Here is what my table looks like: <table _ngcontent-vhp-c82="" datatable="" id="dtOptionsComments" class="display table tabl ...

c#htmlseleniumselenium-webdriverxpath

What is the best way to incorporate a specific term from the class into CSS styling

I am working on a webpage that includes '<a> <i> <label>' elements with specific classes. <a class="icon-home"></a> <label class="icon-pencil"></label> <i class="icon-display"></i> I want to ...

htmlcsscss-selectors

Ways to tackle my code's linked dropdown issue without the use of extensions

When I selected the Id Province, I couldn't select the Id City. How can I fix this issue? Controller code snippet to address this: View code snippet for the same: ...

phphtmljsonyii2

Tips for parsing information contained in a cdata tag using python

I have successfully used Beautiful Soup to extract CDATA from an HTML page, but now I need to parse the contents and save them in a CSV file. Here is the code I am using: from bs4 import BeautifulSoup from urllib.request import urlopen import re import c ...

pythonhtmlxmlbeautifulsoupcdata

Determine with jQuery whether the img src attribute is null

My HTML structure is as follows: <div class="previewWrapper" id="thumbPreview3"> <div class="previewContainer"> <img src="" class="photoPreview" data-width="" data-height=""><span>3</span> </div> </div> ...

javascriptjqueryhtmlimage

Obtaining the source code from a different domain website with the help of jQuery

Is there a way to extract part of the source code from a YouTube page without using server-side programming? I've tried cross-domain AJAX techniques like Yahoo YQL and JsonP. While Yahoo YQL allows me to grab part of the source code, I'm facing ...

javascriptjqueryhtmlajaxcross-domain

Styling errors with jQuery validation

How can I remove the borders in ul > li elements? Here is my current setup: errorLabelContainer: $("ul", $('div.error')), wrapper: 'li', errorContainer: $('div.error'), I have tried the following: div.message{ backgr ...

jquerycssvalidation

"Finding the Perfect Alignment: How to Center Legends in Firefox

The issue at hand An issue has been identified where the code functions as intended in Chrome, Opera, and IE but fails to work in Firefox: fieldset>legend { display: table; float: none; margin: 0 auto; } <fieldset> <legend>Legend ...

htmlcssfirefox

Delete the display:none; attribute to make the item appear on the screen

The following CSS code styles the element: span { position:absolute; float:left; height:80px; width:150px; top:210px; left:320px; background-color:yellow; display:none; //No display ...

jquerycssattributes

Within jQuery lies the power to perform multiplication operations effortlessly

I'd like to accomplish this using jQuery: var menuItems = document.getElementsByTagName("li"); for (var k = 0; k < menuItems.length; k++) { if (menuItems[k].className == "menu") { var child = menuItems[k].firstChild; if ...

javascriptjqueryhtml

Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

Is it possible to format a specific part of a string? I'm trying to only stylize the word within quotation marks. This is my cshtml code: { <div class="h-44 overflow-auto text-left mx-4 mb-4"> <p ...

c#cssasp.netasp.net-corerazor

How to retrieve the value of an element within a facebox div with jquery

On my page, I have two div tags displayed below. Whenever I try to retrieve the value of the itemName element using $('#itemName').val();, it always returns the value of the element in the first div (which is blank). Is there a way to access the ...

javascriptjquerycss

Django redirects to an alternative template instead of the default one

After renaming my login.html file to login1.html instead of deleting it, I have been using Django-registration and Django-registration-views from Github. However, despite this change, Django continues to call registration/login1.html. Is there a way for me ...

pythonhtmldjango