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

Unable to see or play local mp4 file in Ionic iOS application

I am facing an issue with my Ionic app where I am trying to show a video playing in the background. The Jaeger25 HTMLVideo plugin works perfectly for Android, but when it comes to iOS, the video simply refuses to play. The video file is located in the www/ ...

Guide to filling out select dropdowns in HTML with information from a database

I'm new to PHP and HTML, so please be patient with me. I've been attempting to populate a select box using data from a MySQL database, but all I see is an empty textbox. Here's my current code: <select name="cargo"> <?php ...

Switching back and forth between two CSS animations using Jquery

I am working on creating a unique pendulum system using 3 balls. After successfully creating the balls and animating them, I am faced with a challenge in making the animation continuous. Here is my code: .circle { width:30px; height:30px; backgrou ...

Is it advisable to include cursor:pointer in the pseudo class :hover?

Which option is better to use? .myclass { cursor: pointer; } or .myclass:hover { cursor: pointer; } Is there a notable difference between the two? ...

What is the correct way to center-align elements?

I have a basic grid layout that has been styled using CSS. #videowall-grid{ width:700px; border:1px dotted #dddddd; display: none; margin: 5px auto; padding: 5px; } #videowall-grid .square{ padding: 5px; margin: 5px; bo ...

Making the switch from lazy-loaded images to `loading="auto"` once the page has finished loading

I'm exploring a new approach to implement lazy loading of images on a CMS (Sitecore) website, and I have some concerns about potential issues that may arise since I haven't come across any examples of this method being used before. The main goal ...

Utilizing jQuery to dynamically load and display multiple files within a single div, replacing any previously loaded content

Forgive my lack of experience, as I am just starting out with this and it may be a simple issue. My goal is to have an empty div (popBox) load a file when a link is clicked, but currently I am struggling to overwrite the content in the div when clicking o ...

Tips for implementing a linear gradient on a bar graph using Highcharts

I'm trying to create a bar chart using highcharts, and I want to apply a linear gradient for the bar fill color. However, I am not sure how to set this up. Can anyone provide some guidance or ideas? Here is an example of what I'm hoping to achie ...

Removing div elements containing specific text using jQuery

Hello everyone, I am trying to remove all divs that contain a specific part of a string. Does anyone know how I can do this? This is what my original HTML looks like: <div class="article-options_4"></div> And this is the new HTML structure, ...

What causes the disappearance of CSS styles when attempting to modify the className in react js?

I am currently working on a basic react application, and I am trying to dynamically change the name of a div element using the following code snippet - <div className={'changeTab ' + (page.login ? 'leftSide' : 'rightSide')} ...

Retrieve data from the database and automatically populate all text fields when the dropdown value is modified

I need assistance with populating all textbox values based on the dropdown selection. The dropdown values are fetched using an SQL query. Here is the HTML Code: <select name="name" ID="name" class="form-control"> <opt ...

Difficulty encountered in setting margin to 0 in Bootstrap 4 framework

Upon observation, I found that setting margin: 0px had no effect. Even after specifying a margin of 0 for left and right, the screenshot still displayed the margin. https://i.sstatic.net/mkYsO.png Initially, I checked for any conflicting classes or IDs c ...

Struggling to position a div below another div within a flex box layout

When trying to make the Information & advice header appear above the other div elements, I encountered an issue with flexbox. Despite setting the container div to have a flex direction of column, the header div continued to align to the left of the oth ...

Apply a specific image layout once the drop event occurs

I have a container with 5 image pieces that need to be dropped into another container to complete the image. Once an image is dropped, I want to apply the style "position:absolute" so that it sticks to the previous image in that container. Although I have ...

CSS style for tables with inner gutters only

I am attempting to create a table layout with spacing between cells but without any external space for the cells at the border. I have written a simple code snippet to illustrate my issue: html, body, div, table, caption, tbody, tfoot, thead, tr, th, td ...

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Exploring the creation of a FAQ section with individual carousels for each item. My primary objective is for the carousel to transition to the next chapter when advancing beyond the last slide (backwards navigation would be a future enhancement). I'v ...

Unusual anomalies observed in CSS navigation bar styling

During my CSS work on a navigation bar, I came across an unusual behavior. First Attempt: #nav li { display: inline-block; } #nav li { font-size: 1em; line-height: 40px; width: 120px; height: 40px; ...

I seem to be having trouble with jQuery. Every time I try to submit my form, nothing happens

I am currently working on creating a web page for a numerical game, but I am facing difficulties with my jQuery implementation. Despite checking all my placements, nothing seems to happen when I click on the Submit button. Any assistance would be greatly a ...

Show a tweet by its identification number

Is there a way to show a tweet by its unique id? For instance, if I have the id 876126300649525249, can I display the actual tweet on my website? Does anyone know if this is achievable? ...

How to Use PHP to Submit Form Information

I am a beginner in PHP and I need help with sending form details to an email address. I have tried looking for solutions online but I keep running into the same issue - when I submit the form, it downloads the PHP file instead of sending an email. Below i ...