Коробки внутри таблиц обрезают содержимое внутри при наведении (только при просмотре на iPhone - на всех других устройствах код работает) - PullRequest
Новая
       25

Коробки внутри таблиц обрезают содержимое внутри при наведении (только при просмотре на iPhone - на всех других устройствах код работает)

0 голосов
/ 06 февраля 2019

При наведении курсора на блоки в таблице содержимое внутри блоков обрезается с различной длиной по всей таблице.Это делает контент в основном нечитаемым.Что нужно сделать, чтобы блоки не обрезали содержимое?Есть ли другие ошибки в моем коде?

Изменение заполнения.

<style type="text/css">

.dialog-close-button  {
 border-radius: 25px!important;

}

.dialog-close-button{
 font-size: 15px!important;
 font-weight: bold!important;
 padding:20px!important;
}

td a {
   width: 100%;
   display: block;
}

table {
     font-family:'ratio', Arial, sans-serif!important;; word-spacing: 
0.2px;
     line-height: 1.2;
}


.tijd {vertical-align:top;font-size:14px; 
color:#D39F5B;padding-right:10px; white-space:nowrap;}
.leeg {height:5px;color:#ffffff;}
.lijntje {border-top: 1px dotted #757575;}
.large:hover {background-size: 
100%;transform:scale(1.1,1.1);transform-origin:center;transition: 
transform .2s ease-in-out;
     margin:5px;
}


.locatie 
{background-color:#f2f2f0;font-size:16px;font-weight:normal;padding:20px 
0px;overflow:hidden;text-align:center;}
.donkergroen 
{background-color:#3b5f27;text-align:center;vertical-align:center;}
.lichtgroen 
{background-color:#83be38;text-align:center;vertical-align:center;}
.donkerblauw 
{background-color:#063d72;text-align:center;vertical-align:center;}
.lichtblauw 
{background-color:#005fab;text-align:center;vertical-align:center;}
.goud 
{background-color:#d39f5b;color:#ffffff;font-size:16px;font- 
weight:normal;padding:7px 
5px;overflow:hidden;word-break:normal;text-align:center;}

.locatie a:link {color:#d39f5b!important;text-decoration:none;}
.locatie a:active {color:#d39f5b!important;text-decoration:none;}
.locatie a:visited {color:#d39f5b!important;text-decoration:none;}
.locatie a:active {color:#d39f5b!important;text-decoration:none;}
.lichtgroen a:link,a:active,a:visited,a:active 
{color:#ffffff!important;text-decoration:none;}
.donkergroen a:link,a:active,a:visited,a:active 
{color:#ffffff;text-decoration:none;}
.lichtblauw a:link,a:active,a:visited,a:active 
{color:#ffffff!important;text-decoration:none;}
.donkerblauw a:link,a:active,a:visited,a:active 
{color:#ffffff!important;text-decoration:none;}


@media screen and (max-width: 320px)
{
.tg {width: auto !important;}
.tg col {width: auto !important;}
.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}
.tg  {font-family:'prokyon', Arial, sans-serif; 
text-transform:uppercase;font-size:10px!important;}
.locatie 
{background-color:#3c3c3a;color:#d40f39!important;font-size:10px;font- 
weight:normal;padding:10px 
5px;overflow:hidden;word-break:normal;text-align:center;}

.tijd {vertical-align:top;font-size:18px; color:#D39F5B;}

.donkergroen 
{background-color:#3b5f27;color:#ffffff;text-align:center;vertical- 
align:center;padding:10px 
5px;border-bottom: 1px solid #ffffff;}
.lichtgroen 
{background-color:#83be38;color:#ffffff;text-align:center;vertical- 
align:center;padding:10px 
5px;border-bottom: 1px solid #ffffff;}
.goud 
{background-color:#d40f39;color:#ffffff;text-align:center;vertical- 
align:center;padding:10px 
5px;border-bottom: 1px solid #ffffff;}
}




</style>

<div class="tg-wrap"><table class="tg" >
   <tr>
     <td class="tijd">&nbsp;</td>
     <td class="locatie large"><a 
href="#elementor-action%3Aaction%3Dpopup%3Aopen%20settings%3DeyJpZCI6IjY3NjEiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D">DROMEN</a></td>
     <td class="wit"></td>
     <td class="locatie">DENKEN</td>
     <td class="wit"></td>
     <td class="locatie">DURVEN</td>
     <td class="wit"></td>
     <td class="locatie">DOEN</td>
   </tr>
     <tr>
     <td class="tijd"></td>
     <td COLSPAN="7"></td>

   </tr>
     <tr>
       <td class="tijd">09.15 uur</td>
       <td COLSPAN="7" class="goud">ONTVANGST</td>
     </tr>
     <tr>
       <td colspan="8" class="leeg"></td>
     </tr>

    <tr>
      <td class="tijd">09.45 uur</td>
      <td class="lichtgroen large lijntje"><a 
href="#elementor-action%3Aaction%3Dpopup%3Aopen%20settings%3DeyJpZCI6IjY3NjEiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D">BJORN<br>
        <br>
       Scheidrechter en ondernemer</a></td>
      <td  class="wit lijntje"></td>
      <td class="donkergroen large lijntje"><a href="pont">STEVEN<br>
        <br>
        Ontwikkelings-<br>
          psycholoog</a></td>
      <td  class="wit lijntje"></td>
       <td class="lichtblauw large lijntje"><a href="droste">ALLARD<br>
       <br>
           Professioneel dromer en ondernemer</a></td>
      <td  class="wit lijntje"></td>
      <td rowspan="3" class="donkerblauw large lijntje"><a 
href="workshop">WORKSHOP<br>
       <br>
          Insights Discovery</a></td>
    </tr>
   <tr>
     <td height="25" class="leeg"></td>
     <td colspan="6"></td>
     </tr>
   <tr>
     <td class="tijd">11.00 uur</td>
     <td class="lichtgroen large lijntje"><a href="kramer">JITSKE<br>
       <br>
         Corporate antropoloog</a></td>
     <td  class="wit lijntje"></td>
     <td class="donkergroen large lijntje"><a href="busscher">JEROEN<br>
       <br>
       Managementdenker en auteur
       </a></td>
     <td  class="wit lijntje"></td>
     <td class="lichtgroen large lijntje"><a href="anthonio">GABRIEL<br>
       <br>
       Hoogleraar en bestuurder
       </a></td>
     <td class="wit lijntje"></td>
   </tr>
   <tr>
     <td colspan="8" class="tijd"></td>
     </tr>
   <tr>
     <td class="tijd">12.00 uur</td>
     <td rowspan="2" class="goud lijntje">VERZORGDE LUNCH<br>
       met diverse kleurrijke activitenten
       </td>
     <td rowspan="2"  class="goud lijntje"></td>
     <td height="16" class="donkergroen large lijntje"><a 
href="mes">HELEEN<br>
       </br>
         Partner van het HappinessBureau</a></td>
     <td rowspan="2"  class="goud lijntje"></td>
     <td class="goud lijntje"></td>
     <td rowspan="2"  class="goud lijntje"></td>
     <td rowspan="2"  class="goud lijntje">VERZORGDE LUNCH<br>
met diverse kleurrijke activitenten </td>
   </tr>
   <tr>
     <td class="tijd">13.00 uur</td>
     <td class="goud"></td>
     <td class="lichtblauw large"><a href="stevens">MARCEL<br>
       <br>
         Cabaretier</a></td>
   </tr>
   <tr>
   <td colspan="8"></td>
     </tr>
     <tr>
       <td class="tijd">14.00 uur</td>
       <td class="lichtgroen large lijntje"><a href="bergman">RUTGER<br>
         <br>
           Historicus<br></a></td>
       <td  class="wit lijntje"></td>
       <td class="donkergroen large lijntje"><a href="luun">SAMIR<br>
         &amp; JOOST<br>
         <br>
         Programmamanagers
       </a></td>
       <td  class="wit lijntje"></td>
       <td class="lichtblauw large lijntje"><a href="krabe">JASPER<br>
       <br>
       Beeldend kunstenaar</a></td>
       <td  class="wit lijntje"></td>
      <td rowspan="3" class="donkerblauw large lijntje"><a 
href="workshop">WORKSHOP<br>
       <br>
          Insights Discovery</a></td>

     </tr>
   <tr>
     <td colspan="7" ></td>
   </tr>
   <tr>
     <td height="124" class="tijd">15.00 uur</td>
     <td class="lichtgroen lijntje large"><a href="dijksterhuis">AP 
DIJKSTERHUIS<br>
       <br>
       Hoogleraar Sociale Psychologie
       </a></td>
     <td  class="wit lijntje"></td>
     <td class="donkergroen large lijntje"><a href="luun">SAMIR TER LUUN<br>
       &amp; JOOST VAN OORT<br>
       <br>
       Programmamanagers </a></td>
     <td  class="wit lijntje"></td>
     <td class="lichtblauw large lijntje"><a href="werner">LUCILLE<br>
       <br>
         Programmamaakster, presentatrice en motivator</a></td>
     <td  class="wit lijntje"></td>
   </tr>
   <tr>
     <td class="leeg"></td>
     <td colspan="7"></td>
   </tr>
   <tr>
     <td class="tijd">15.45 uur</td>
     <td colspan="7" class="goud">BORREL</td>
   </tr>
   <tr>
     <td class="tijd">17.00 uur</td>
     <td colspan="7" class="leeg"></td>
   </tr>
</table></div>

Коробки с обрезанным содержимым.

...