Show button only on first tablerow of specific class

Thijmen van Doorn 0
Viewed 20

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.

enter image description here

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 class="events-table">
<tbody>
<tr class="cursus"><a class="ButtonInschrijven" href="http://">Inschrijven</a></tr>
<tr class"meerdaagsecursus_sub2"><a class="ButtonInschrijven" href="http://">Inschrijven</a></tr>
<tr class"meerdaagsecursus_sub2"><a class="ButtonInschrijven" href="http://">Inschrijven</a></tr>
<tr class"meerdaagsecursus_sub2"><a class="ButtonInschrijven" href="http://">Inschrijven</a></tr>
<tr class="cursus"><a class="ButtonInschrijven" 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;
}
css html
2 Answers

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 class="events-table">
  <tbody>
    <tr class="cursus">
      <td><a class="ButtonInschrijven" href="http://">Inschrijven</a></td>
    </tr>
    <tr class="meerdaagsecursus_sub2">
      <td><a class="ButtonInschrijven" href="http://">Inschrijven</a></td>
    </tr>
    <tr class="meerdaagsecursus_sub2">
      <td><a class="ButtonInschrijven" href="http://">Inschrijven hidden</a></td>
    </tr>
    <tr class="meerdaagsecursus_sub2">
      <td><a class="ButtonInschrijven" href="http://">Inschrijven hidden</a></td>
    </tr>
    <tr class="cursus">
      <td><a class="ButtonInschrijven" href="http://">Inschrijven</a></td>
    </tr>
  </tbody>
</table>

userqWv70

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

Saad Rehman0
Related