I'm using javascript to modify a page's styling and it's working great. The next step however is to change the styling of the first column of a table. How can I identify and set the styling of the first column only? My other changes so far are based on ID or based on a number of items having a class. In this example I just know they are TH or TD elements, and I want to change the ones in the first column.

In case anyone asks, this is my code so far... this is working and doesn't include anything to do with setting the style of the first column

    function rotate_headers() {
    const collection = document.getElementsByTagName("th");
    for (let i = 0; i < collection.length; i++) 
    {
    collection[i].innerHTML = 
    '<div style="padding-left: 100%;"><div style="transform: translate(7px, 3px)  rotate(315deg);  width: 30px;"><span style="border-bottom: 1px solid #ccc;  padding: 5px 10px; color:grey;"' + collection[i].innerHTML + '</span> </div></div>';
    // collection[i].style.background = "#6877c3"; //
    //collection[i].style.height = "100px"; //
    }
    
    const collection2 = document.getElementsByClassName("table-bordered");
    for (let i = 0; i < collection2.length; i++) 
    { collection2[i].style.border = "0px"; 
     collection2[i].style.marginTop = "95px";  
    }
    
    const collection3 = document.getElementsByClassName("highlight");
    for (let i = 0; i < collection3.length; i++) 
    { collection3[i].classList.remove("highlight"); }
    
    const collection4 = document.getElementsByClassName("table-content");
    for (let i = 0; i < collection4.length; i++) 
    { collection4[i].style.padding = "1rem 1rem"; }
    
    const collection5 = document.getElementsByClassName("table-content");
    for (let i = 0; i < collection5.length; i++) 
    { collection5[i].style.width = "100px"; 
    collection5[i].style.position = "relative";
    collection5[i].style.whiteSpace = "nowrap";
    collection5[i].style.overflowX = "scroll"; 
    collection5[i].style.overflowY = "hidden"; 
    
     }
    
    }

The below code does what I want, but only if my table has an ID... which mine typically do not.

var table = document.getElementById('test');
    for (var i = 1; i < table.rows.length; i++) {
        var firstCol = table.rows[i].cells[0]; //first column
        firstCol.style.background = 'red'; // or anything you want to do with first col
    }

The code below does not work... which is my problem

   var table = document.getElementsByTagName("table");
    for (var i = 1; i < table.rows.length; i++) {
        var firstCol = table.rows[i].cells[0]; //first column
        firstCol.style.background = 'red'; // or anything you want to do with first col
    }