Showcasing two columns side by side in the first row and one column beneath them in the second row within a single tr

Question

Showcasing two columns side by side in the first row and one column beneath them in the second row within a single tr

Here is the code snippet I created:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>A: $10</td>
    <td>B: $15</td>
    <td colspan="2">Sum: $25</td>
  </tr>
</table>

Link to view on JsFiddle

I am looking to insert 3 <td> elements within a single <tr> tag. The first two <td> elements should be displayed on the same line, while the third <td> should go on a new line, all within the same row.

Apologies for any confusion earlier in my explanation.

javascript jquery html css

Answer 1

Answer №1

To achieve the desired outcome with your table structure, you can utilize the following CSS styles. The key is to convert the table into block elements and then apply styling accordingly. It's important to note that the nth child element in this case is based on 2 columns - if you had three columns, as shown in your second example, it would be 3n+1

table, table * {
    display:block;
    box-sizing:border-box;
}
table {
    padding:3px 0 0 3px;
    border: 1px solid black;
    width:299px;
}
table:after {
    content:'';
    display:block;
    height:0;
    clear:both;
}
th, td {
    border: 1px solid black;
    width:144px;
    margin-bottom:3px;
    margin-right:3px;
    float:left; 
    
}
th:nth-child(2n + 1), td:nth-child(2n + 1) {
    clear:left;
}
.newline {
    float:none;
    width:291px;
}

<table>
    <tr>
        <th>Month</th>
        <th colspan="2">Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td colspan="2">$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td colspan="2">$100</td>
    </tr>
    <tr>
        <td>A: $10</td>
        <td>B: $15</td>
        <td class="newline">Sum: $25</td>
    </tr>
</table>

I've included colspans in the table above to ensure your HTML remains valid even when CSS is disabled.

Answer 2

To achieve the desired outcome with your table structure, you can utilize the following CSS styles. The key is to convert the table into block elements and then apply styling accordingly. It's important to note that the nth child element in this case is based on 2 columns - if you had three columns, as shown in your second example, it would be 3n+1

table, table * {
    display:block;
    box-sizing:border-box;
}
table {
    padding:3px 0 0 3px;
    border: 1px solid black;
    width:299px;
}
table:after {
    content:'';
    display:block;
    height:0;
    clear:both;
}
th, td {
    border: 1px solid black;
    width:144px;
    margin-bottom:3px;
    margin-right:3px;
    float:left; 
    
}
th:nth-child(2n + 1), td:nth-child(2n + 1) {
    clear:left;
}
.newline {
    float:none;
    width:291px;
}

<table>
    <tr>
        <th>Month</th>
        <th colspan="2">Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td colspan="2">$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td colspan="2">$100</td>
    </tr>
    <tr>
        <td>A: $10</td>
        <td>B: $15</td>
        <td class="newline">Sum: $25</td>
    </tr>
</table>

I've included colspans in the table above to ensure your HTML remains valid even when CSS is disabled.

Answer 3

Answer №2

This isn't a problem with IE8, but rather an issue with your code structure.

To fix this, you should combine the columns at the top like so:

<td colspan="1" rowspan="3"></td>

   <tr>
       <td colspan="2">Total: $25</td>
    </tr>

http://jsfiddle.net/t77remtc/2/

Updated version: http://jsfiddle.net/t77remtc/13/

Answer 4

This isn't a problem with IE8, but rather an issue with your code structure.

To fix this, you should combine the columns at the top like so:

<td colspan="1" rowspan="3"></td>

   <tr>
       <td colspan="2">Total: $25</td>
    </tr>

http://jsfiddle.net/t77remtc/2/

Updated version: http://jsfiddle.net/t77remtc/13/

Showcasing two columns side by side in the first row and one column beneath them in the second row within a single tr

Answer №1

Answer №2

Similar questions

What is the method for causing a patch event using inline HTMX tags when a carousel-item in a Bootstrap 5 carousel is activated?

Simple steps to validate an ajax response with a specific string

`Positioning of inline-block elements`

Strategies for obtaining newly updated data with every request and implementing a no-cache approach in Apollo GraphQL and Angular

Adjusting the width of elements using percentage values in CSS and altering the layout with Bootstrap

The layout generated by Metronic does not display the CSS styles

Limiting the number of rows in pagination using a select option

AJAX - Self-Executing Anonymous Function

The React Swiper.js slider functions properly only when the page is resized

Gatsby's build process encounters a stumbling block when webpack fails due to issues

Creating responsive images in Bootstrap columns

Issue encountered during registration for the pset9 cs5 (unforeseen exceptions)

Tips on maintaining the numerical value while using JSON.stringify()

What could be causing the NodeJs cluster module to be malfunctioning?

Tips for fixing the issue of "The use of getPreventDefault() is outdated. Please use defaultPrevented instead."

Switching chart types in ChartJS doesn't function properly when transitioning from a pie chart

Sending an array from a URL to JavaScript

AJAX does not support functioning links

Is the parent node of the input element the input element itself?

having difficulty with the design of my google map