display:block does not recognize TDs in a TR?

Question

I have code that switches provinces and states based on the country selected (see code at the bottom). The functionally of that code works fine but the browser no longer seems to recognize that the <TR> that shows as display:block; has two TDs.

If set to display:block;, instead of showing these two TDs, so they line up with country, it renders as if there is only one TD and displays both the province/state text and dropdown box together. I have spent several days trying different suggestions I found here and in other places but have still not been able to find a solution that makes the rendering work.

Based on what I found here

<div style display="none" > inside a table not working

Hiding table data using <div style="display:none">

the following should work, but the rendering is still incorrect.

<TR ID="USstate" STYLE="display: none;">
    <TD><DIV CLASS="inputlabel">State</DIV></TD>
    <TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
            <OPTION VALUE="0">Select state</OPTION>
            <OPTION VALUE="102">Alabama</OPTION>
            <OPTION VALUE="105">Arizona</OPTION>
            <OPTION VALUE="106">Arkansas</OPTION>
            <OPTION VALUE="108">California</OPTION>
        </SELECT></TD>
</TR>

<tbody ID="USstate" STYLE="display: none;">
<TR><TD><DIV CLASS="inputlabel">State</DIV></TD>
    <TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
            <OPTION VALUE="0">Select state</OPTION>
            <OPTION VALUE="102">Alabama</OPTION>
            <OPTION VALUE="105">Arizona</OPTION>
            <OPTION VALUE="106">Arkansas</OPTION>
            <OPTION VALUE="108">California</OPTION>
        </SELECT></TD>
</TR>   
</tbody>

When I use class="show" instead of display:block in the id=Default TR in the main code below, it renders as it should but changing .style.display='block'; and .style.display='none'; to .className='show'; and .className='hide'; in the showStates javascript to switch between show and hide breaks the functionality.

<script>
.show {  display: block;  }
.hide {  display: none; }
</script>

<tbody ID="Default" CLASS="show">
<TR><TD><DIV CLASS="inputlabel">Province</DIV></TD>
    <TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
            <OPTION VALUE="0">Select province</OPTION>
            <OPTION VALUE="139">Newfoundland/Labrador</OPTION>
            <OPTION VALUE="143">Nova Scotia</OPTION>
            <OPTION VALUE="134" SELECTED>Ontario</OPTION>
            <OPTION VALUE="149">Prince Edward Island</OPTION>
        </SELECT></TD>
</TR>
</tbody>

Would love to hear suggestions as to why the rendering goes off the rails. Again, this question is not about the functionality as the following code works as it should, it is only about fixing the botched rendering.

Any clarifications required, please advise

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>
.show {  display: block;  }
.hide {  display: none; }
</script>
<script>
function showStates(country)
{   if (country == "242")
    {   document.getElementById('NLprov').style.display='block';
        document.getElementById('CAprov').style.display='none';
        document.getElementById('USstate').style.display='none';
        document.getElementById('NoProv').style.display='none';
        document.getElementById('Default').style.display='none';
    }
    else if (country == "101") 
    {   document.getElementById('NLprov').style.display='none';
        document.getElementById('CAprov').style.display='block';
        document.getElementById('USstate').style.display='none';
        document.getElementById('NoProv').style.display='none';
        document.getElementById('Default').style.display='none';
    }
    else if (country == "102")
    {   document.getElementById('NLprov').style.display='none';
        document.getElementById('CAprov').style.display='none';
        document.getElementById('USstate').style.display='block';
        document.getElementById('NoProv').style.display='none';
        document.getElementById('Default').style.display='none';
    }
    else
    {   document.getElementById('NLprov').style.display='none';
        document.getElementById('CAprov').style.display='none';
        document.getElementById('USstate').style.display='none';
        document.getElementById('NoProv').style.display='block';
        document.getElementById('Default').style.display='none';
    }
    return false;
}
</script>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BORDER="0">
<FORM METHOD="post">
<TABLE>
    <TR><TD>
<TABLE>
    <TR><TD>Country</TD>
        <TD><SELECT NAME="cc_countryid" id="country" onChange="showStates(this.options[this.selectedIndex].value);" STYLE="font-size:12px;">
                <OPTION VALUE="101" SELECTED>Canada</OPTION>
                <OPTION VALUE="102">United States</OPTION>
                <OPTION VALUE="314">Germany</OPTION>
                <OPTION VALUE="242">Netherlands</OPTION>
            </SELECT></TD>
    </TR>
    <tbody ID="Default" STYLE="display: block;">
    <TR><TD>Province</TD>
        <TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
                <OPTION VALUE="0">Select province</OPTION>
                <OPTION VALUE="139">Newfoundland/Labrador</OPTION>
                <OPTION VALUE="143">Nova Scotia</OPTION>
                <OPTION VALUE="134" SELECTED>Ontario</OPTION>
                <OPTION VALUE="149">Prince Edward Island</OPTION>
            </SELECT></TD>
    </TR>
    </tbody>
    <tbody ID="NoProv" STYLE="display: none;">
    <TR><TD>Prov/State</TD>
        <TD><INPUT TYPE="hidden" NAME="cc_provid" VALUE="0">&nbsp;</TD>
    </TR>
    </tbody>
    <tbody ID="CAprov" STYLE="display: none;">
    <TR><TD>Province</TD>
        <TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
                <OPTION VALUE="0">Select province</OPTION>
                <OPTION VALUE="139">Newfoundland/Labrador</OPTION>
                <OPTION VALUE="143">Nova Scotia</OPTION>
                <OPTION VALUE="134">New Brunswick</OPTION>
                <OPTION VALUE="149">Prince Edward Island</OPTION>
            </SELECT></TD>
    </TR>
    </tbody>
    <tbody  ID="USstate" STYLE="display: none;">
    <TR><TD>State</TD>
        <TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
                <OPTION VALUE="0">Select state</OPTION>
                <OPTION VALUE="102">Alabama</OPTION>
                <OPTION VALUE="105">Arizona</OPTION>
                <OPTION VALUE="106">Arkansas</OPTION>
                <OPTION VALUE="108">California</OPTION>
            </SELECT></TD>
    </TR>   
    </tbody>
    <tbody ID="NLprov" STYLE="display: none;">
    <TR><TD>Province</TD>
        <TD><SELECT NAME="cc_provid" STYLE="font-size:12px;">
                <OPTION VALUE="0">Select province</OPTION>
                <OPTION VALUE="201">Drenthe</OPTION>
                <OPTION VALUE="202">Gelderland</OPTION>
                <OPTION VALUE="202">Friesland</OPTION>
        </SELECT></TD>
    </TR>
    </tbody>
</TABLE>
    </TD></TR>
    </TABLE>
</FORM>
</BODY>
</HTML>

By default, in a `` the `
` elements are `display: table-cell;` not `block`. — Pointy, Nov 03 '19 at 14:43
@Andreas not sure what your comment is about, they are inside a script see the code `` What am I missing? — Paul, Nov 03 '19 at 15:14
@Pointy Not sure what that means either. The `display:block` is in the TR and TBODY not the TD. It does not explain why it does not render as two TDs — Paul, Nov 03 '19 at 15:18
@Paul the proper visible display style for a `` is "table-cell" not "block". The style "block" does not simply mean "visible"; it's a specific layout instruction. — Pointy, Nov 03 '19 at 15:20
with the exception of Andreas pointing out an oversight on my part, the comments are theoretical and not practical. Perhaps someone else can propose an actual solution, if there is one. — Paul, Nov 03 '19 at 18:29

score 0 · Answer 1 · answered Nov 04 '19 at 04:12

Got a more practical response with an actual workable solution elsewhere.

For those with the same issue, instead of using style="display: block/none;" use style="visibility: visible/collapse"; as shown in the code below. Do not use hidden instead of collapse or you will get extra white space for the hidden TRs.

Tested and working in FF, IE and Chrome.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>
function showStates(country)
{   if (country == "242")
    {   document.getElementById('NLprov').style.visibility='visible';
        document.getElementById('CAprov').style.visibility='collapse';
        document.getElementById('USstate').style.visibility='collapse';
        document.getElementById('NoProv').style.visibility='collapse';
        document.getElementById('Default').style.visibility='collapse';
    }
    else if (country == "101") 
    {   document.getElementById('NLprov').style.visibility='collapse';
        document.getElementById('CAprov').style.visibility='visible';
        document.getElementById('USstate').style.visibility='collapse';
        document.getElementById('NoProv').style.visibility='collapse';
        document.getElementById('Default').style.visibility='collapse';
    }
    else if (country == "102")
    {   document.getElementById('NLprov').style.visibility='collapse';
        document.getElementById('CAprov').style.visibility='collapse';
        document.getElementById('USstate').style.visibility='visible';
        document.getElementById('NoProv').style.visibility='collapse';
        document.getElementById('Default').style.visibility='collapse';
    }
    else
    {   document.getElementById('NLprov').style.visibility='collapse';
        document.getElementById('CAprov').style.visibility='collapse';
        document.getElementById('USstate').style.visibility='collapse';
        document.getElementById('NoProv').style.visibility='visible';
        document.getElementById('Default').style.visibility='collapse';
    }
    return false;
}
</script>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BORDER="0">
<FORM METHOD="post">
<TABLE>
    <TR><TD>
<TABLE>
    <TR><TD>Country</TD>
        <TD><SELECT NAME="cc_countryid" id="country" onChange="showStates(this.options[this.selectedIndex].value);">
                <OPTION VALUE="101" SELECTED>Canada</OPTION>
                <OPTION VALUE="102">United States</OPTION>
                <OPTION VALUE="314">Germany</OPTION>
                <OPTION VALUE="242">Netherlands</OPTION>
            </SELECT></TD>
    </TR>
    <TR ID="Default" STYLE="visibility: visible;">
        <TD>Province</TD>
        <TD><SELECT NAME="cc_provid">
                <OPTION VALUE="0">Select province</OPTION>
                <OPTION VALUE="139">Newfoundland/Labrador</OPTION>
                <OPTION VALUE="143">Nova Scotia</OPTION>
                <OPTION VALUE="134" SELECTED>Ontario</OPTION>
                <OPTION VALUE="149">Prince Edward Island</OPTION>
            </SELECT></TD>
    </TR>
    <TR ID="NoProv" STYLE="visibility: collapse;">
        <TD>Prov/State</TD>
        <TD><INPUT TYPE="hidden" NAME="cc_provid" VALUE="0">&nbsp;</TD>
    </TR>
    <TR ID="CAprov" STYLE="visibility: collapse;">
        <TD>Province</TD>
        <TD><SELECT NAME="cc_provid">
                <OPTION VALUE="0">Select province</OPTION>
                <OPTION VALUE="139">Newfoundland/Labrador</OPTION>
                <OPTION VALUE="143">Nova Scotia</OPTION>
                <OPTION VALUE="134">New Brunswick</OPTION>
                <OPTION VALUE="149">Prince Edward Island</OPTION>
            </SELECT></TD>
    </TR>
    <TR ID="USstate" STYLE="visibility: collapse;">
        <TD>State</TD>
        <TD><SELECT NAME="cc_provid">
                <OPTION VALUE="0">Select state</OPTION>
                <OPTION VALUE="102">Alabama</OPTION>
                <OPTION VALUE="105">Arizona</OPTION>
                <OPTION VALUE="106">Arkansas</OPTION>
                <OPTION VALUE="108">California</OPTION>
            </SELECT></TD>
    </TR>
    <TR ID="NLprov" STYLE="visibility: collapse;">
        <TD>Province</TD>
        <TD><SELECT NAME="cc_provid">
                <OPTION VALUE="0">Select province</OPTION>
                <OPTION VALUE="201">Drenthe</OPTION>
                <OPTION VALUE="202">Gelderland</OPTION>
                <OPTION VALUE="202">Friesland</OPTION>
        </SELECT></TD>
    </TR>
</TABLE>
    </TD></TR>
    </TABLE>
</FORM>
</BODY>
</HTML>

display:block does not recognize TDs in a TR?

1 Answers1