Show button only on first tablerow of specific class-CodePudding

I have a dynamically generated table that shows different courses. This table is generated by PHP, and gives every row a button. However, for a multi-day course I only want one button, instead of three buttons.

I want to solve this through CSS because it is not possible to adjust in PHP (long story).

The HTML (folded) of the table is:

<table >
<tbody>
<tr ><a  href="http://">Inschrijven</a></tr>
<tr class"meerdaagsecursus_sub2"><a  href="http://">Inschrijven</a></tr>
<tr class"meerdaagsecursus_sub2"><a  href="http://">Inschrijven</a></tr>
<tr class"meerdaagsecursus_sub2"><a  href="http://">Inschrijven</a></tr>
<tr ><a  href="http://">Inschrijven</a></tr>
</tbody>
</table>

I tried the following in CSS attempt, but I can't figure it out:

.meerdaagsecursus_sub2:nth-child(1n 2) .ButtonInschrijven {
    visibility: hidden;
}

CodePudding user response：

You can create a column in your courses table in the database named multiday and set its value for 1 if that course is a multi-day course, and when you create table dynamically, create a variable whose value is set to 0. Add a custom class name to the button where multi-day course value = 1 and change the variable to 1. while adding the custom class apply this if statement to check for the value of that variable, if its value has changed to 1 do not add that class to other buttons.

======give that class style="display:block"==========

i hope that will solve your problem

CodePudding user response：

How do you know it's a multi day course? Surely this would be best done in your php to add a rowspan (and not add the other buttons) when you know the course is over multiple days

Otherwise if you are determined to do it with css you can use the adjacent sibling combinator ( )

.meerdaagsecursus_sub2 .meerdaagsecursus_sub2 .ButtonInschrijven {
  display: none;
}

<table >
  <tbody>
    <tr >
      <td><a  href="http://">Inschrijven</a></td>
    </tr>
    <tr >
      <td><a  href="http://">Inschrijven</a></td>
    </tr>
    <tr >
      <td><a  href="http://">Inschrijven hidden</a></td>
    </tr>
    <tr >
      <td><a  href="http://">Inschrijven hidden</a></td>
    </tr>
    <tr >
      <td><a  href="http://">Inschrijven</a></td>
    </tr>
  </tbody>
</table>