Home/ Questions/Q 8146113
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T13:53:09+00:00

The first row in my table has three cells. I’m trying to set up

  • 0

The first row in my table has three cells. I’m trying to set up a second row with four cells. I would like the borders to all be the same. I cannot, however, achieve that so far as the cells on the bottom row (the row with four cells) either has a double border, or no border. I’ve tired border-collapse and border-style-right, with no luck. How can I have the bottom row look just like the top row – with a single 1px border – except 4 cells in stead of three cells? Here’s my code:

<style type="text/css"> 
table
{
    border-collapse:collapse;
}
table.outer
{
    border: 1px black solid;
    border-collapse: collapse;
    width:750px;
}
table.outer td
{
    border: 1px black solid;
    border-collapse: collapse;
}
table.nested
{
    width: 750px;
}
table.nested td
{
    border:0px black solid;
    border-collapse:collapse;
}   
</style>    
</head>
<body>

<table class="outer">
  <tr>
    <td>foo 1</td>
    <td>foo 2</td>
    <td>foo 3</td>
  </tr>
        <td colspan="3">
            <table class="nested">
              <tr>
                <td>bar 1</td>
                <td>bar 2</td>
                <td>bar 3</td>
                <td>bar 4</td>
              </tr> 
            </table>
        </td>   
</table>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Is there any reason why you must have a nested table? If you want the two rows to look identical, try adding more rows and adjusting the colspan of each cell. If you find the least common multiple of both three and four, you can make a table that has twelve columns and set the colspan of a row with three columns to four and the colspan of a row with four columns to three.

    Nesting tables within tables can be problematic with CSS and it is also heavier for the page.

    <table class="outer">
  <tr>
    <td colspan="4">foo 1</td>
    <td colspan="4">foo 2</td>
    <td colspan="4">foo 3</td>
  </tr>
  <tr>
    <td colspan="3">bar 1</td> 
    <td colspan="3">bar 2</td>
    <td colspan="3">bar 3</td>
    <td colspan="3">bar 4</td>
  </tr>
</table>

    This way, you can also style all of the cells with just one CSS td selector, if you wanted to share a common style between the two rows.

    Extra explanation of answer:
    (Using the LCM as the total number of columns for the table ensures that each cell can be the same size as the other cells in its row, without affecting the size of cells in other rows. You can make a row with n cells as long as the total number of columns in the table is divisible by n. Thus, with this twelve column wide table, you can have rows with 1, 2, 3, 4, 6, or 12 columns, and all cells can be centered about the middle of the table. Also, if you want to dynamically generate a table, it wouldn’t be too hard to write a function to create however many cells you need in each row with this method.)

    • 0