Home/ Questions/Q 7645705
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T10:00:33+00:00

I have two row, there are some things in 1st row that decide the

  • 0

I have two row, there are some things in 1st row that decide the row’s width;
On the second row I have couple of groups of elements which intended to contain two elements side by side.
I want to make even spaces between these groups of elements in 2nd row. They should stretch all over the cell and take all it’s width.
Could you advice, what would I do?

The code goes like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<body>
<table  border="1">
<tr>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
</tr>
    <tr>
<td colspan="5" align="justify">
    <!-- group1 -->
    <select class="sorter" >
    </select>
    <select class="dir" >
    </select>

    <!-- group2 -->
    <select class="sorter" >
    </select>
    <select class="dir" >
    </select>

    <!-- group3 -->
    <select class="sorter" >
    </select>
    <select class="dir" >
    </select>

    <!-- group4 -->
    <select class="sorter" >
    </select>
    <select class="dir" >
    </select>
</td>
</tr>
</table>
</body>
</html>

EDIT: So far I did this, and almost got it. But the spaces between first and last groups are not even. Any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
                table.ball {empty-cells: show}
                table.ball td {text-align:center;border:1px solid blue;}
                table.ball td:nth-last-of-type(1) {text-align:right; } 
                table.ball td:nth-of-type(1) {text-align:left;} 
                select.sorter {width:180px}
        </style>
    </head>
<body>
<table  >
<tr>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
    <td width="200">
        text
    </td>
</tr>
    <tr>
<td colspan="5" align="middle" >
    <table class="ball" width="100%" >
        <colgroup>

        </colgroup>
        <tr>
            <td>
                <!-- group1 -->
                <select class="sorter" >
                </select>
                <select class="dir" >
                </select>
            </td>

            <td>
                <!-- group1 -->
                <select class="sorter" >
                </select>
                <select class="dir" >
                </select>
            </td>

            <td>
                <!-- group1 -->
                <select class="sorter" >
                </select>
                <select class="dir" >
                </select>
            </td>

            <td>
                <!-- group1 -->
                <select class="sorter" >
                </select>
                <select class="dir" >
                </select>
            </td>
        </tr>
    </table>
</td>
</tr>
</table>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Maybe this example is close to what you need. I eliminated some of your hard coded info and put it into css.

    table {table-layout: fixed; border-collapse: collapse;}
td {width: 200px; border: 1px solid black;}
.sorter, .dir {width: 11.5%;} 
td[colspan="5"] {text-align: center;}

    11.5% width seemed to work well, even though mathematically it seemed that it should be closer to 12.5%, but the select elements were doing some funky stuff with having extra space to their right. However, the text-align: center keeps them evenly spaced nice.

    • 0