Is there any way to clear/hide the first td in a two td table, without access to the first td?

Question

Is there any way to clear or hide the contents of the first td, from the second td in a two column table, without any edit access to the actual td's?

So I'd like to hide the numbers in the table below

<table>
    <tr>
        <td>1.</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>2.</td>
        <td>More content</td>
    </tr>
    <tr>
        <td>3.</td>
        <td>Even more content</td>
    </tr>
</table>

This is in a vendor-supplied application that spits out the coded page. The only access is the ability to add code in the Content section (second td in each row).

I've tried to use a div tag with some absolute positioning and just cover the first td with the second, but I could never get it to work consistently.

You can only access to the second `td` inline style of each `tr`? Or is there a global css file you can use? — Quentin Veron, Sep 17 '18 at 23:11
What do you mean "no access to td"?? CSS only? Could you perhaps target it with JS? — , Sep 17 '18 at 23:27
demonhunter24: sorry...but correct, i can't modify the actual td code. I can only add code to the content, so yeah, I think only CSS could work here. — user10376954, Sep 17 '18 at 23:39

jla · Accepted Answer · 2018-09-19T00:15:45.067

With CSS Selectors

If your page has only one table you could use CSS selectors. In your case you need to add a style that targets <td> tags that don't have a previous <td> sibling.

td {
    /* hide the first td element */
    display: none;
}

td + td {
    /* display all td elements that have a previous td sibling */
    display: block;
}

If you are only able to add content within the second <td> of each row then adding a whitespace stripped version of the above code within style tags to the first one will probably work, but could have messy side effects if there is more than one table on your page.

<table>
    <tr>
        <td>1.</td>
        <td><style>td{display:none;}td+td{display:block;}</style>Content</td>
    </tr>
    <tr>
        <td>2.</td>
        <td>More content</td>
    </tr>
    <tr>
        <td>3.</td>
        <td>Even more content</td>
    </tr>
</table>

With JavaScript

If you have more than one table on your page, try inserting an empty <div> with a unique ID into the first <td>'s content. Immediately after place a script that targets the closest <table> parent of that ID, from which you can extract the necessary <td>s to hide. Additionally, you need to make sure you only run the code once the page is loaded, otherwise it may not pick up any trs etc beyond where the script is implemented.

The easiest way to find the nearest parent that is <table> is by using closest but this isn't supported in Internet Explorer. This post has a good solution (parent only) that I'll use.

The complete script:

window.onload = function() {
    function getClosest( el, tag ) {
        tag = tag.toUpperCase();
        do {
            if ( el.nodeName === tag ) {
                return el;
            }
        } while ( el = el.parentNode );
        return null;
    }
    var table = getClosest( document.getElementById( 'unique-id' ), 'table' );
    var trs = table.getElementsByTagName( 'tr' );
    for ( var i = 0; i < trs.length; i++ ) {
        trs[ i ].getElementsByTagName( 'td' )[ 0 ].style.display = 'none';
    }
}

Including the <div> with a unique ID, stripping whitespace and adding the <script> tags, your table would look something like:

<table>
    <tr>
        <td>1.</td>
        <td><div id="unique-id"></div><script>window.onload=function(){function getClosest(el,tag){tag=tag.toUpperCase();do{if(el.nodeName===tag){return el;}}while(el=el.parentNode);return null;}var table=getClosest(document.getElementById('unique-id'),'table'),trs = table.getElementsByTagName('tr');for(var i=0;i<trs.length;i++){trs[ i ].getElementsByTagName('td')[0].style.display='none';}}</script>Content</td>
    </tr>
    <tr>
        <td>2.</td>
        <td>More content</td>
    </tr>
    <tr>
        <td>3.</td>
        <td>Even more content</td>
    </tr>
</table>

jla, your second solution worked perfect on a copy of the main table in question, but you're right...it did create messy side effects on the rest of the page as basically the entire page is made up of tables. So as far as you know, there is no way to apply something like to to a specific row instead of the entire table (or tables in this case) correct? — user10376954, Sep 18 '18 at 18:45
@user10376954 I've added a solution that uses JavaScript to target the table you need. — jla, Sep 19 '18 at 00:16
the JavaScript solution worked *perfectly*. the "client" (my coworker) was very happy. Thank you! — user10376954, Sep 19 '18 at 17:58

Is there any way to clear/hide the first td in a two td table, without access to the first td?

1 Answers1

With CSS Selectors

With JavaScript