Styling table cell borders using CSS

I am encountering some issues with the table below. Firstly, there seems to be errors in the HTML code that are being flagged. However, the main problem I am facing is that the left column is not receiving a complete border and I cannot determine the cause.

Check out the JSFiddle here

<!DOCTYPE html>
<html>

  <head>
    <title> Listing 2014</title>
    <style type="text/css">
      * html body {
        margin: 0;
        padding: 0;
        border: 0;
      }

      body {
        margin: 0;
        padding: 0;
        border: 0;
      }

      body {
        font-family: "Lucida Console", sans-serif;
        font-size: 66%;
      }

      table {
        border-spacing: 0;
        border-collapse: collapse;
        border: 0;
        width: 650px;
      }

      td {
        white-space: nowrap;
        text-align: right;
        border-collapse: collapse;
        border: 1px solid #000;
      }

      th {
        font-family: Helvetica;
        font-size: 120%;
      }

      body {
        margin: 10px;
      }

      .linkespalte {
        text-align: center;
        width: 80px;
        font-size: 100%;
        border-collapse: collapse;
        border: 1px solid #000;
      }

      .lfd {
        width: 3em;
      }

      .bet {
        width: 6em;
      }

      .vorst {
        width: 6em;
      }

      .date {
        width: 6em;
      }

      .mwst {
        width: 4em;
      }

    </style>
  </head>

  <body>
    <br/>
    <br/>
    <table>
      <tr>
        <th colspan="7"> Heading I </th>
      </tr>
      <tr>
        <td colspan="3">Total Net: 0.00</td>
        <td colspan="4">Total VAT 7%: 0.00 Total VAT 19%: 0.00</td>
      </tr>
    </table>
    <br/>
    <br/>
    <table>
      <tr>
        <th colspan="7">Heading II</th>
      </tr>
      <tr>
        <td class="linkespalte" rowspan="250"><em>480</em></td>
        <td class="lfd"> 1</td>
        <td class="date"> 18.12.</td>
        <td width="120">Company XY</td>
        <td width="120">iPad AIR 16GB</td>
        <td width="10" class="bet"> 369.00</td>
        <td class="mwst"> 19</td>
        <td class="vorst"> 58.92</td>
      </tr>
      <tr>
        <td colspan="3">Total Net: 310.08</td>
        <td colspan="4">Total VAT 7%: 0.00 Total VAT 19%: 58.92</td>
      </tr>
    </table>
  </body>

</html>

Answer №1

Here is your code snippet :

<td class="linkespalte" rowspan="250" ><em>480</em></td>

However, the correct code should be :

<td class="linkespalte" rowspan="2" ><em>480</em></td>

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

What's the best way to dynamically show Bootstrap collapse panels in a loop with AngularJS ng-repeat?

Currently, I am utilizing angularJS and attempting to include a bootstrap collapsible-panel within a loop. The code that I have written is causing all the panel bodies to be displayed beneath the first panel header. I need each body to be shown below i ...

Consistently scaling the Embla carousel slides for a seamless presentation experience

In my current project, I am utilizing Embla Carousels and aiming to incorporate a smooth slide scaling effect as users scroll through. The idea is for slides to enlarge the closer they get to the left edge of the carousel container, then decrease in size r ...

Basic CSS element placement

Visit my website here. There is a black video box under the product image that I want to align to the left. I tried to adjust the CSS but couldn't find anything causing the issue. When I move the video box above the Facebook button and align it to t ...

What is the best way to personalize the HTML Filter in Power-Mezz?

I've been playing around with the HTML Filter feature in the PowerMezz library and I'm interested in customizing the filtering rules for a specific use case. Is this something that can be done? For instance, the default settings allow the style ...

The hover feature in jQuery may encounter issues when implemented with Angular's ng-repeat directive on objects

I have successfully implemented a jQuery hover function: $('.deleteButton').hover(function(){ $(this).css('opacity', '1'); }, function(){ $(this).css('opacity', '.5'); }); The function was functi ...

Perform CSS transitions simultaneously

Hey there! I'm currently working on a button that includes a Font Awesome icon at the end of it. To display the icon, I'm using the :after pseudo-element on the button, which is working fine so far. The issue I'm facing is with the CSS tran ...

What is the optimal number of keywords to include in the META keywords tag?

I recently came across a discussion about the importance of the keywords meta tag in HTML for search engine visibility, particularly on platforms like Yahoo! and Ask. While most of us may not have inside knowledge of search engine algorithms, I am curious ...

How can I simulate or manipulate the element's scrollHeight and clientHeight in testing scenarios?

In my JavaScript code, I have a function that checks if an HTML paragraph element, 'el', is a certain size by comparing its scrollHeight and clientHeight properties: function isOverflow(element: string): boolean { const el = document.getEleme ...

The ins and outs of duplicating and adding an empty element

Is it possible to add empty html rows dynamically? I want to insert new html rows and clear their contents afterward. To achieve this, I tried using the .html('') method but faced some issues. My implementation looks like the following code sn ...

Set a dynamic Active Class on various divisions by utilizing their respective indexes

I have two divs with the same class. When I click on an anchor tag within one of the elements, I want to add a class to the corresponding position in the second div as well. Mirror: JSFiddle Here is the jQuery code snippet: $(document).on('click ...

What steps can I take to prevent my website from getting distorted when I zoom in or out?

I have a website in progress and I'm facing an issue with my navbar distorting when I zoom in. As I increase the page's zoom, the navigation buttons start moving apart and eventually overlap each other. How can I prevent this from happening? Belo ...

Using Django and Jquery to pass multiple values to HTML, with one value stored in a .js file

Here is an example of HTML code: {% for m in mortgages %} <input id ='mortgages_counter' name='mortgages_counter' type='hidden' value='{{ m.MonthlyPaid }}'> {% endfor %} If used for a selection menu: {% for ...

Troubleshooting a Navbar Issue in a Custom Bootstrap Template

I am a beginner in html and bootstrap, but I recently attempted to create my own bootstrap template. Initially, I tried to work with the "starter template" code from getbootstrap.com, but after launching the code and making some changes, the navigation bar ...

Interactive input box featuring selectable suggestions

Hey, I'm looking to design an HTML input field with a suggestions menu. The desired effect is similar to the image provided below, where clicking on the input field triggers a dropdown menu to appear. I'm curious if there are any plugins or code ...

jQuery can be used to relocate buttons on a webpage

When the Contact button is clicked, how can I move the Close button below #panel? It's currently fixed in position. Here's my demonstration: https://jsfiddle.net/25u78gff/ https://i.sstatic.net/qDad9.png jQuery('.sub-menu').addClass( ...

Take out a text field from a cell within a table

I am looking for a way to dynamically remove a textarea when the 'x' button next to it is clicked. Each 'x' button has an id that corresponds to the id of the associated textarea. For example, if I click the 'x' button under t ...

When trying to submit a form, encountering an `Uncaught ReferenceError` due to calling ajax within

Attempting to trigger an ajax function within a form in order to retrieve a value for the dropdown. mypython.py @app.route('/new_data', methods = ['POST', 'GET']) def new_data(): #Filter data and return the data(data_lis ...

"Creating a navigational bar using Bootstrap in a one-page application

I am facing an issue with Bootstrap's navbar in my single-page application. The dropdown navigation menu for mobile is not collapsing properly after clicking. Although I tried to fix it by adding data-toggle="collapse" data-target="#navbar" attributes ...

Inconsistency in field generation in WordPress Contact Form 7 causing issues

After utilizing the WordPress plugin Contact Form 7 to put together a straightforward questionnaire, I discovered that two fields, Your Birthday and Your Email, were mistakenly generated on top of one another in the final output. You can take a look at th ...

choose from the list of options that appear above the control

It's strange, but no matter how simple the example is - whether it's regular HTML or Bootstrap - the option list always appears on top of the select control itself. I have no idea why this is happening. Can someone help me with this issue? Here ...