How to get only the first column of this table-CodePudding

I am trying to set the first column of tables, like the following, to be sticky dynamically; when there is no first column with a rowspan attribute it's ok, but when I get tables like this the z-index is overlaid by the last td:

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-0pky {
  border-color: inherit;
  text-align: left;
  vertical-align: top
}

<table >
  <thead>
    <tr>
      <td  rowspan="3"></td>
      <td ></td>
      <td ></td>
      <td ></td>
    </tr>
    <tr>
      <td ></td>
      <td ></td>
      <td ></td>
    </tr>
    <tr>
      <td  colspan="3"></td>
    </tr>
  </thead>
</table>

CodePudding user response：

You could use the :first selector

for example with jquery

$("tr").each(function(){   console.log($("td:first", this)) })

But i am not sure what you mean becaues you tagged also html and css

with this selection you can add css dynamically. without jquery its a little more code

tr = document.getElementsByTagName("tr");
Array.from(tr).forEach((row) => console.log(row.children[0]) )

CodePudding user response：

You can use the :first-child selector.

What we essentially do is choosing the first-child within the tr element. Then, we choose the first td element inside the first tr we selected:

tr:first-child > td:first-child  {
  background-color: red;
}

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

Docs

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-0pky {
  border-color: inherit;
  text-align: left;
  vertical-align: top
}

tr:first-child>td:first-child {
  background-color: red;
}

<table >
  <thead>
    <tr>
      <td  rowspan="3"></td>
      <td ></td>
      <td ></td>
      <td ></td>
    </tr>
    <tr>
      <td ></td>
      <td ></td>
      <td ></td>
    </tr>
    <tr>
      <td  colspan="3"></td>
    </tr>
  </thead>
</table>