Hover an element of a table to change another element of the same table

Question

I know this question migth be duplicated but even reading many similar questions I can't reach my objective. What I want is when the user hover one of the "th"s of the table the class "segment1" that have some of the "td"s change the background-color. After reading this similar question I try the second, the third and the fourth option of the answer, but I don't obtein what i want.

Code:

th{
  padding-right: 15px;
}
td{
  padding-right: 15px;
}
#s1{
  background-color: #f80000;
}
/* Dosen't work :( */
#s1:hover ~ .segment1{
  background-color: #ff8000;
}

        <table class="table">
          <thead>
            <tr>
              <th scope="col" id="s1">S-1</th>
              <th scope="col" id="s2">S-2</th>
              <th scope="col" id="s3">S-3</th>
              <th scope="col" id="s4">S-4</th>
              <th scope="col"><input id="all" type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger"></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="segment1">A</td>
              <td class="segment2">B</td>
              <td class="segment3">C</td>
              <td class="segment4">D</td>
              <td class="segment1">E</td>
            </tr>
            <tr>
              <td class="segment1">F</td>
              <td class="segment2">G</td>
              <td class="segment3">H</td>
              <td class="segment4">I</td>
              <td class="segment2">J</td>
            </tr>
            <tr>
              <td class="segment1">K</td>
              <td class="segment2">L</td>
              <td class="segment3">M</td>
              <td class="segment4">N</td>
              <td class="segment3">O</td>
            </tr>
          </tbody>
        </table>        

I know that this efect I can easily obtain it by JavaScript but I wnat it to achieve it by CSS only.

Thanks for your help.