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

After clicking the submit button, how can I eliminate the following: "config.php?username=++psw&Text=psw&submit=send?" and remain on the same page?

Whenever I hit the submit button on my form, PHP completes its task but instead of staying on the page (or simply reloading it), I am redirected to the same URL with '/config.php?username=technologies.%0D%0A++&submit = Send ". Is there a way ...

phphtml

Footer not adhering to the bottom of specific pages

I have been using the code snippet below to ensure that most of my pages stick to the bottom. However, I've noticed that the ones that don't are sub-menu items that contain a contact form with captcha. I'm not sure what's causing this i ...

css

"Encountering a glitch with masterpage.cs in Aspx.net and C#

Currently facing a perplexing issue while developing a website using aspx.net and c#. The following code snippet is on my masterpage: protected void Page_Load(object sender, EventArgs e) { if (HttpContext.Current.Request.Url.AbsolutePath == "/ ...

c#cssasp.net

Storing data in a text or HTML file using server-side JavaScript

Currently, I am working on a JavaScript form that involves saving user-entered variables to either a .txt file or a new webpage with the variables pre-filled in the inputs. I know that JavaScript cannot directly manipulate the user's machine, but I am ...

javascripthtmlserver-side

Bootstrap slider aligned to the right side

I'm currently utilizing bootstrap 3 for my website. However, I encountered an issue with the slider when viewing the page on a mobile device as the image was displaying outside the viewport, shifted to the right. Additionally, in Firefox, the slider ...

jquerycsstwitter-bootstrap-3

Increase the CSS integer by a set value at regular intervals with the help of JavaScript

I am looking to create a simulated loading icon that gives the illusion of loading for some calculations, but in reality, it loads quickly. My plan is to increment the animation every second until it appears "complete". I am using CSS3 animations, with a h ...

javascriptjqueryhtmlcss

I utilized the "data-target" attribute to ensure the active link retains its style. Is there a way to preserve the style when navigating away from an active link?

Can someone assist me with this re-upload? I need help tweaking my code to maintain style when navigating between pages using the "data-target" attribute. Currently, the style is being lost when moving from the original link (e.g., "link/sub01.html") to a ...

javascripthtmljquerycss

Efficiently handling jumbled strings in Python: A guide to parsing

Looking to pull out ID numbers and their pass/fail status from an XML file, the data I have is messy and I'm new to Python. Specifically, I have a list of strings with the info and need to extract the codes and status. Currently, I'm struggling w ...

pythonhtmlstringlistbeautifulsoup

Position two div elements so that the second div expands to occupy the entire available space

I am struggling with aligning two divs within a container div, one on the left and one on the right. I am using flexbox for alignment purposes, as shown in the code snippet below. .box { display: flex; align-items: center; just ...

htmlcssflexbox

What is the best method for combining several variables into a single one using a parameter?

On the webpage, there is a table containing 11 checkboxes. I am looking to create a keyword that allows testers to input just 1, 2, or 3 to select a specific checkbox without needing multiple lines of element variables. Here are the elements: xpath=(//in ...

cssseleniumxpathrobotframework

Displaying content on a webpage using PHP, AJAX, and HTML

Looking to update my current form setup. I have a basic Form below: <form action="" method="POST"> <input type="button" value="Generate Numbers" onclick="on_callPhp1()"/> </form> Accompanied by this javascript code: <script type="te ...

javascriptphpjqueryhtmlajax

Where should AJAX-related content be placed within a hyperlink?

When needing a link to contain information for an AJAX call, where is the correct place to include the info? I have typically placed it in the rel attribute, but after reviewing the documentation for rel, it appears that this may not be the right location ...

javascriptjqueryhtmlajax

How to style CSS to ensure printed table content fits perfectly within the page

Does anyone know how to resize the contents of a table using CSS so that everything shows up when printing, without wrapping text in individual cells? In this scenario, <table class="datatables" id="table1"> <tr> <td style="white-space:nowr ...

htmlcssprintinghtml-table

Guide to displaying a table enclosed in a div based on a selected value in a select dropdown?

I am attempting to retrieve the table options using the select question-picker: Here is what I have tried: $(document).ready(function() { var question_container = $('.question-picker option[value="1"]').parent(); console.log(question_cont ...

javascriptjqueryhtml

Display the tooltip only when the checkbox is disabled in AngularJS

My current setup includes a checkbox that is disabled based on a scope variable in Angular. If the scope variable is true, the checkbox stays disabled. However, if the scope variable is false, the checkbox becomes enabled. I am looking to implement a too ...

javascripthtmlangularjs

Personalized scroll bar within a Chrome application

I'm currently working on customizing the scrollbar for my Chrome App using CSS and I have encountered an issue with rule #2: section { overflow: auto } section::-webkit-scrollbar { width: 5px ; } Oddly enough, when I apply the second rule, Chrom ...

cssgoogle-chromescrollbargoogle-chrome-appblink

Creating personalized buttons for HTML dropdowns in PhoneGap

Is it possible to customize the buttons in an HTML select box (dropdown) with PhoneGap 3.5? I am looking to include a "Cancel" button along with the "Done" button. Are there any ways to modify or add select buttons through the PhoneGap API or plugins? ...

htmlselectcordova

The CSS and Javascript files are failing to load

My web page is not displaying my CSS and JavaScript properly when I access it through a folder in the browser. Both files are located within multiple subfolders. I have attempted to rename the files to troubleshoot the issue. <head> <link rel=" ...

javascripthtmlcss

retrieving the selected checkbox value

My challenge is to extract the values of dynamically changing checked checkBoxes on my webpage. For example: while ($row=myqli_fetch_array($result)){ echo"<div>"; echo"<select id=\"course\" onchange=getCheckBox()> <opt ...

javascriptjqueryhtmlajax

How can I retrieve the current background color and revert it back after a .hover event?

I am trying to use the .hover function to change the background color of a menu. Each menu item has a different background color, so I want it to return to its original color when the user hovers off. In other words, I want the script to read the current b ...

jquerycssajax