Issue with border in a nested table within an HTML table

I am faced with an issue in styling nested tables. My goal is to have borders on both tables, but I specifically need only the bottom border of the inner table without the top, right, and left borders. The default border style can be achieved using the following code snippet.

<table border="1">

The problem arises when applying this code to the inner table as it sets the outer border instead of just the bottom border. Removing the top, right, and left borders does not solve the issue properly. To address this, I attempted to use the following code to resolve the problem.

<table border="1" width="100%">
   <tr>
        <td valign="top">VMware Certified Professional</td>
        <td style="padding:0px;">
            <table border="1">
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
            </table>             
        </td>            
   </tr>                        
   <tr>
        <td valign="top">VMware Certified Associate</td>
        <td style="padding:0px;">
            <table border="1">
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
                <tr><td>hello</td></tr>
            </table>             
        </td>
   </tr>
</table>

An attached screenshot demonstrates the desired default border style.

Attached is the layout that I am looking for

Answer №1

When dealing with two inner tables and only wanting the bottom border, you can achieve this by setting the unwanted borders to none. Here is an example solution (view on jsfiddle):

<style>
table table {
    border-top: none;
    border-left: none;
    border-right: none;
}
</style>

Another approach, using HTML attributes like frame="below" in the inner <table> elements, may also work well despite being considered deprecated or obsolete. Check out this alternative solution on jsfiddle.

The final results might not be exactly what you expected, so feel free to clarify if needed.

Answer №2

Do you think this is the solution you need?

Link to the code

Here is how to style it with CSS:

table.inner td {
    border-top: 1px solid #444;
    border-bottom: 1px solid #afafaf;
    width:100%;
}

Answer №3

After exploring numerous solutions, I have found the following approach to be effective for my needs.

 <style>
   .tbl_head{ width:35%;}
</style>
<table cellpadding="3" border="1" align="center">
<tr>
  <td rowspan="3" valign="top" class="tbl_head">ALIGNVALIGNALIGN</td>
  <td>First</td>
</tr>
<tr>
  <td>Second</td>
</tr>
<tr>
  <td>Third</td>
</tr>
<tr>
  <td rowspan="3" valign="top" class="tbl_head">VALIGNALIGNVALIGN</td>
  <td>First</td>
 </tr>
<tr>
<td>Second</td>
</tr>
<tr>
  <td>Third</td>
</tr>
</table>

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

Firefox has trouble with jQuery AJAX as anchor tags in returned HTML are not clickable

The issue at hand: In Firefox, anchor tagged text in the returned HTML is not clickable (no "hand cursor" and no action), while IE 10 seems to handle it without any problems. The scenario: I am utilizing jQuery AJAX to request a PHP page that fetches HTML ...

Converting CSS code into JavaScript

I am currently working with the following code: .mr15 > * margin-right: 15px &:last-child margin-right: 0 I need help translating this code to Javascript. Should I use JQuery or pure Javascript for this scenario? Thank you. ...

Acquiring data from a website using Python post user engagement

Hey everyone! One of my friends has a lot of typing to do for her IT classes in school. She needs to learn how to type quickly on the keyboard. Being quite lazy, she asked me if I knew of any way she could type her texts on without actually doing any wor ...

Scroll up and down to witness the enchanting interplay of fading in and out

Looking to expand upon the solution given in this response. The existing code effectively fades in an element while scrolling down and fades out an image when scrolling up; however, it lacks the functionality to fade out when scrolling down. I am aiming ...

Switch up image origin when image reaches screen boundary

I am trying to create a DVD screensaver with changing images each time it hits the edge, but I can't seem to get it to work. I've attempted using the code snippet below: var img = document.getElementById("myImage"); img.src = 'img/new-image. ...

What is the process for specifying the content type as application/json in an Ajax request?

Do you have a smart contract named GovtContract that functions properly when utilizing curl commands? $curl -X POST -H "Content-Type: application/json" localhost:3000/govtcontract/set -d '{"value":"5"}' | jq $curl -X GET -H ...

What could be the reason for my select list not showing up?

Hello fellow developers, I am currently working on creating a dynamic tablerow that allows users to fill in input fields and select options from a list for each cell. While the input fields are functioning properly, I am facing an issue with displaying th ...

What is the best way to merge different Vue JS instances (each linked to different html divs) into one cohesive unit using Vue

Essentially, I have a scenario where I've created two HTML divs named vueapp1 and vueapp2. Both of these divs serve the same purpose of displaying information and are linked to their individual Vue instances for extracting JSON data and presenting it. ...

Tips on retrieving the text content of an HTML element using its tag

Is there a way to retrieve the selected text along with its HTML tags using window.getSelection()? When using window.getSelection(), it only returns plain text such as HELLO. However, I need the text with the HTML tag included, like this <b>Hello< ...

Comparing currency to double in handlebars: a comprehensive guide

I've been working with Handlebars.js and encountered an issue when trying to compare product prices above $35. The problem arises from the fact that prices are stored as "$54.99" which gets treated as 0 when compared to a number. How can I effectively ...

Position the Bootstrap Modal at the start of the designated DIV

When using a Bootstrap Modal to display larger versions of thumbnails in a photo gallery, there can be some challenges. The default behavior of Bootstrap is to position the modal at the top of the viewport, which may work fine in most cases. However, if th ...

Is it possible to have unique styles for individual tabs in a mat-tab-group using Angular Material?

Is it possible to have different text colors for each tab in a mat-tab-group and change the color of the blue outline at the bottom? If so, can you provide guidance on how to achieve this? Here is the default appearance of the tabs in my app: https://i.st ...

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Using react.js, I'm currently developing a website that appears like this before resizing: pre-resize_screenshot_website However, upon vertical or diagonal resizing, the layout becomes distorted especially in the 'availability search bar' ...

Exploring the challenges of applying styles to buttons using the :first-child and :last-child selectors, especially when

I successfully applied rounded corners to the first and last elements of a styled button using CSS. Here is how it looks: The issue arises when I dynamically insert new buttons using Angular's ng-if. The new buttons disrupt the rounded corners of th ...

Connecting to an element within a separate node (XSLT)

I have an XML document that includes a list of companies. My goal is to use XSLT to create links that point to the <link> child of the next company node. To provide a clearer picture, here is a snippet of sample XML data I am working with: <portf ...

Having difficulty adjusting certain internal styles within Material UI's <Dialog> component

I want to customize the styling of my <Dialog> component by adding rounded corners using a border radius. Here is the inline style I am trying to apply to override the default styles of the <Dialog>: let overrideStyles = { padding: 0, marg ...

What is the best way to manage classNames dynamically in React with Material-UI?

I am wondering how to dynamically add and remove classes from an img tag. My goal is to change the image automatically every 2 seconds, similar to Instagram's signup page. I am struggling to achieve this using the material-ui approach. Below is a snip ...

Height of the image is being boosted while the width remains consistent

When working on a responsive page layout, I encountered an issue with increasing the height of an image while keeping the width constant. Modifying the width of the image reflects changes, but adjusting the height does not seem to make any difference. I t ...

An innovative tool for discovering how different colors will complement each other

Design may not be my strong suit, but there are times when I need to add a border line or a shade of gray to a background color. Is there a tool available where I can specify background color: #343434 color: #asdfgh and visually see how it will look wit ...

What is the best way to choose a random number using jQuery?

<div class="yyy"></div> <p>...</p> <pre><code>let content = $(".xxx").text(); $(".yyy").html(content); http://jsfiddle.net/tQeCv/ I just require this specific input : Number is {1|2|3|4}, and {one|two|three|four} ...