Setting the height and width of a table and utilizing rowspans may not produce the desired outcome

I've encountered an issue with my table that I can't seem to resolve. The CSS should dictate the width and height, but something seems off. Am I approaching this incorrectly or is there something missing?

Also, why are the borders not aligning properly?

You can view the table, HTML, and CSS in this jsfiddle: http://jsfiddle.net/YaKCT/

<table class="stamtavle">
    <tr>
        <td rowspan=7 class="cell1"><p>Volstrups Casillas</p></td>
    </tr>
    <tr>
        <td rowspan=3 class="cell2"><p>Colman</p></td> 
    </tr>
    <tr>
        <td class="cell3"><p>Carthago Z</p></td>
    </tr>
    <tr>
        <td class="cell3"><p>Rosenquarz</p></td>
    </tr>
    <tr>
         <td rowspan=3 class="cell2"><p>Lucille</p></td>        
    </tr>
    <tr>
         <td class="cell3"><p>Lordship</p></td>
    </tr>
    <tr>
         <td class="cell3"><p>Carna</p></td>
    </tr>
    <tr>
         <td rowspan=7 class="cell1"><p>Volstrups Corona</p></td>        
    </tr>
    <tr>
        <td rowspan=3 class="cell2"><p>Churchill</p></td>
    </tr>
    <tr>
        <td class="cell2"><p>Cicero</p></td>
    </tr>
    <tr>
        <td class="cell3"><p>Ziska</p></td>
    </tr>
    <tr>
        <td rowspan=3 class="cell2"><p>Volstrups Cartia</p></td>        
    </tr>
    <tr>
        <td class="cell3"><p>Calato Z</p></td>
    </tr>
    <tr>
        <td class="cell3"><p>Sidsel</p></td>
    </tr>
</table>
htmlcsshtml-table

Answer №1

Insert the following code into your table element

class="customtable" cellpadding="0" cellspacing="0"

To achieve consistent spacing between cells in your rowspan layout, you may need to consider a different strategy. Although this modification does improve the overall appearance.

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

Can JavaScript trigger an alert based on a CSS value?

Hello, I am facing an issue. I have created a blue box using HTML/CSS and now I want to use JavaScript to display an alert with the name of the color when the box is clicked. Below is my code: var clr = document.getElementById("box").style.background ...

javascripthtmlcss

When using $dialogs.create on my website, a popup form appears with specific formatting limitations dictated by the defining code

When a user clicks a button on my website, a function in the controller is triggered. Here is the function that runs when the button is pressed: $scope.launch = function(idOfSpotOfInterest, schedOfSpotOfInterest){ var dlg = null; dlg = $dialogs. ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Issue with division operation in HTML not functioning

I've been working on a division calculation within an HTML file, but so far I haven't had success using PHP or JavaScript. While {{ property.listprice }} is correctly displaying a number in the HTML file, the other elements are not functioning as ...

phphtml

Styling CSS for HTML links

I am encountering an issue with a CSS hover effect on an image that is also a hyperlink to another website. The CSS styling for the hover effect seems to be interfering with the functionality of the HTML hyperlink. The image in question is aligned with ot ...

htmlcss

Multi-object retrieval feature in Material Dialog

I am encountering an issue with Material Dialog when confirming the action to "remove row" in a table. Initially, removing from the dialog works fine and deletes a row. However, after closing the dialog and re-calling it for the second time, the removal ac ...

javascripthtmlmaterial-designmaterial-ui

Changing HTML elements dynamically within an ng-repeat using AngularJS directives

I have devised an angular directive where I execute an ng-repeat. The fundamental purpose of this directive is to interchange itself with a distinct directive that depends on a value forwarded into the original directive: <content-type-directive type=" ...

javascripthtmlangularjsangularjs-directive

The textbox is unable to receive input from the pop-up window

Whenever I click on a text-box, a popup window opens up. However, the value is not inserted in the text-box when I select any radio option in the popup. Can you identify where the problem lies? Here's the text-box: <tr><td> Work </td& ...

phphtml

How to make a HTML div background fill the entire page

Is there a way to extend the background in a div so that it adjusts to fit the screen resolution? I also want to include a navigation bar at the top right corner of this div for the intro page. There will be additional content in other divs positioned be ...

javascripthtmlcss

Recurrence of the Chosen Headers

After discovering the new website http://csslint.net, I've started to question my approach to constructing stylesheets. One method I have recently used is as follows: /* Fonts */ h1 { font-size:20px } p { font-size:12px } /* Colors */ h1 { colo ...

cssperformancecss-selectorscsslint

Automatically resizing font to fit the space available

I am attempting to achieve the task described in the title. I have learned that font-size can be set as a percentage. Naturally, I assumed that setting font-size: 100%; would work, but unfortunately it did not. For reference, here is an example: http://js ...

javascripthtmlcssfontsfont-size

Images and CSS are functioning properly when viewed locally, but are not displaying as expected on GitHub pages

There seems to be some issues with transferring my website from a custom domain on Hover. When I try to import it to anthematics.github.io, only the HTML loads while images and CSS are missing. <link rel="stylesheet" href="theme.css" type="text/css"> ...

htmlcssgithub-pages

Combining two images using HTML and CSS resulted in conflicts when attempting to overlay any additional elements

I have managed to overlay two images successfully, but I am experiencing conflicts when trying to do the same with other div images. Here is the code on jsfiddle: https://jsfiddle.net/cLew1t2v/ and here is the code snippet: <div> <div style ...

htmlcss

Utilize the assigned value of a variable from a separate file

Is it possible to set a variable in an external file called "Variable.js", assign it a value in a file named "Page1.html", and then use that variable with its assigned value in another file named "Page2.html"? For example, let's consider the contents ...

javascripthtml

Enhance your CSS link in Yii framework 2.0 by incorporating media printing capabilities

While working on Yii framework 2.0, I typically include a CSS file by adding the following code snippet to assets/AppAsset.php: public $css = [ 'css/style.css', ]; Upon inspecting the element in the web browser, I notice the following code ...

cssattributesmediayii2

Incorporating an HTML image into a div or table using jQuery

I am a beginner in using JQuery within Visual Studio 2013. My question is how to insert an img tag into a table or div using JQuery? For example, I have a div and I would like to generate an image dynamically using JQuery. Or, I have a dynamically create ...

javascriptjqueryhtmlcss

Having trouble with Jquery's .mouseover() method? Let's catch the solution!

I'm currently working on a jQuery homework assignment and I've been attempting to enhance the mouseover feature, but unfortunately, it's not functioning as expected. $("button").mouseover(function() { $(this).css({ left: (Math.rando ...

javascriptjqueryhtmlcss

What is the best way to incorporate two range sliders on a single webpage?

I recently started using rangeslider.js on my webpage. I wanted to convert two input fields into range sliders, so I began by converting one successfully. Initially, the HTML code looked like this: <div class="rangeslider-wrap"> <input type=" ...

javascriptjqueryhtmlresponsiverangeslider

The Outer Div Can't Contain Google Maps

I am currently working on integrating a map widget into a dashboard I created using gridstack.js. The sample widget layout that I am aiming for can be seen in the link below: https://i.sstatic.net/ZQP6G.png My goal is to embed the map within the inner (w ...

javascripthtmlcssgoogle-mapsgridstack

Achieving consistent text alignment in HTML and CSS without relying on tables

As I delve into the world of HTML and CSS, I've taken a traditional approach by crafting a login page complete with three input controls (two text inputs and one button). To ensure proper alignment of these elements, I initially turned to the trusty & ...

javascripthtmlcssuser-interface

"Step-by-step guide on creating a dynamic clipping mask animation triggered by mouse wheel

I have developed a sample that functions just as I envision my final outcome to function, with the exception of triggering on mouse-over. Instead, I would like it to activate as a page transition when scrolling with the mouse. (move your cursor over the i ...

javascripthtmlcssmaskclipping