CSS фиксированный столбец в таблице исчезает в iPhone веб-браузере - PullRequest
Новая
       39

CSS фиксированный столбец в таблице исчезает в iPhone веб-браузере

1 голос
/ 02 августа 2020

У меня есть адаптивная CSS прокручиваемая таблица с фиксированным первым столбцом.

Но в веб-браузере iPhone (Safari) первый столбец исчезает. Если вы повернете iPhone в горизонтальное или горизонтальное положение, фиксированный первый столбец станет видимым. Это было протестировано на iPhone X и 5.

На Android телефонах, это не похоже на проблему.

Есть идеи, что могло вызвать эту проблему на iPhone ? 

div.page {
  width: 90%;
  margin: 0 auto;
  background: white;
  padding: 0px 10px 0px 10px;
  box-shadow: 0px -1px 11px 0px rgba(50, 50, 50, 0.95);
}

div.header {
  width: 100%;
  margin: 0 auto 5px;
  padding-bottom: 10px;
  background: #EBEBEB url('images/p5.png') repeat scroll;
}

.clear {
  clear: both;
}

div.main {
  clear: both;
}

div.calc {
  width: 810px;
  float: left;
}

table.calc {
  border-collapse: collapse;
  font-family: Calibri;
  width: 808px;
  border-bottom: medium silver solid;
}

#comparemob {
  display: none;
}

table.calc th[scope=col] {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}

table.calc th[scope=row] {
  padding-left: 5px;
  text-align: left;
  font-size: 1.6em;
  font-weight: bold;
  width: 332px;
}

table.calc th#gross {
  background-color: white;
  background-image: linear-gradient(to top, rgba(128, 128, 128, 1), rgba(128, 128, 128, 0.5));
}

table.calc th#holiday {
  background-color: white;
  background-image: linear-gradient(to top, rgba(255, 255, 0, 1), rgba(255, 255, 0, 0.5));
}

table.calc th#empni {
  background-color: white;
  background-image: linear-gradient(to top, rgba(187, 86, 93, 1), rgba(187, 86, 93, 0.6));
}

table.calc th#umbfee {
  background-color: white;
  background-image: linear-gradient(to top, rgba(165, 129, 61, 1), rgba(165, 129, 61, 0.7));
}

table.calc th#expense {
  background-color: white;
  background-image: linear-gradient(to top, rgba(255, 153, 0, 1), rgba(255, 153, 0, 0.7));
}

table.calc th#salary {
  background-color: white;
  background-image: linear-gradient(to top, rgba(153, 153, 153, 1), rgba(153, 153, 153, 0.7));
}

table.calc th#taxable {
  font-style: italic;
  background-color: white;
  background-image: linear-gradient(to top, rgba(166, 166, 166, 1), rgba(166, 166, 166, 0.7));
}

table.calc th#persallow {
  background-color: white;
  background-image: linear-gradient(to top, rgba(74, 174, 254, 1), rgba(74, 174, 254, 0.7));
}

table.calc th#married {
  background-color: white;
  background-image: linear-gradient(to top, rgba(128, 198, 254, 1), rgba(128, 198, 254, 0.7));
}

table.calc th#taxpaid {
  background-color: white;
  background-image: linear-gradient(to top, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0.7));
}

table.calc th#nicontri {
  background-color: white;
  background-image: linear-gradient(to top, rgba(255, 51, 51, 1), rgba(255, 51, 51, 0.8));
}

table.calc th#tdeduct {
  background-color: white;
  background-image: linear-gradient(to top, rgba(255, 77, 77, 1), rgba(255, 77, 77, 0.8));
}

table.calc th#takehome {
  background-color: white;
  background-image: linear-gradient(to top, rgba(0, 204, 0, 1), rgba(0, 204, 0, 0.7));
}

table.calc td {
  font-size: 1.6em;
}

table.calc td:nth-child(odd) {
  background-image: url('images/Untitled-1.png');
}

table.calc tfoot th {
  padding-left: 5px;
  text-align: left;
  background-color: #838383;
  color: white;
}

table.calc tfoot td {
  padding: 0px 0px 0px 10px;
  font-size: medium;
  background-color: #CDCDCD;
  color: #666666;
}

.row1 {
  background-color: #d8d8d8;
}

.row2 {
  background-color: #ffffa8;
}

.row3 {
  background-color: #f7b9bd;
}

.row4 {
  background-color: #dac399;
}

.row5 {
  background-color: #fbca81;
}

.row6 {
  background-color: #d8d8d8;
}

.row7 {
  background-color: #e6e6e6;
}

.row8 {
  background-color: #a8d8ff;
}

.row9 {
  background-color: #c7e6ff;
}

.row10 {
  background-color: #ffa3a3;
}

.row11 {
  background-color: #fdbfbe;
}

.row12 {
  background-color: #ffcaca;
}

.row13 {
  background-color: #A9F5A9;
}


/*table*/

table.rate {
  border-collapse: separate;
  border-spacing: 1px;
  margin-bottom: 20px;
}

table.rate th,
tr,
td {
  padding: 5px 10px;
}

table.rate th {
  background-color: #60AFDB;
  border-bottom: 5px #0066CC solid;
}

table.rate td {
  background-color: #F6FDFF;
  border-bottom: 1px #60AFDB solid;
}

table.rate tbody {
  display: table-row-group;
  border-bottom: medium #60AFDB solid;
}

@media only screen and (max-width: 740px) {
  body,
  div.data,
  .scroll/*, .main*/
  {
    width: 100%;
  }
  div.page {
    width: unset;
    margin: unset;
    padding: 0px 0px 0px 0px;
  }
  div.main {
    margin: 0 auto;
    padding: 0 10px 0 10px;
    display: flex;
    flex-direction: column;
    /*padding: 0px 10px 0px 10px;*/
  }
  div.calc {
    width: 100%;
  }
  table.calc th[scope=col] {
    font-family: Calibri;
    font-weight: normal;
  }
  .tabs {
    width: max-content;
    padding: 2px 5px 1px 2px;
  }
  .line {
    width: max-content;
  }
  .mscroll {
    /*width: 100%;*/
    overflow-x: scroll;
    margin-left: 105px;
    -webkit-overflow-scrolling: touch;
  }
  .colfix,
  #compare,
  #blank {
    position: absolute;
    left: 10px;
  }
  .colfix1 {
    position: absolute;
    height: 20px;
    width: 85px;
    left: 20px;
    border-bottom: 2px black solid;
    border-top: 2px black solid;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
  }
  table.calc {
    float: left;
    width: 300px;
  }
  table.calc th[scope=row] {
    font-size: 1.0em;
    width: 100px;
  }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="en-gb" http-equiv="Content-Language" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <title>table</title>
  <link rel="stylesheet" href="styles10.css" type="text/css" />


  <style type="text/css">
    a {
      color: #0066CC;
    }
    
    * {
      margin: 0;
      padding: 0;
    }
  </style>

  <script type="text/javascript" src="script1.js">
    <!--
    //-->
  </script>

</head>

<body>

  <div class="page">

    <div class="main">
      <div class="calc">
        <div style="clear:left">
          <p>Test</p>
        </div>

        <div class="mscroll">
          <table class="calc">
            <tr style="border-bottom:2px black solid; border-top:2px black solid;">
              <th scope="col" style="border-bottom:2px black solid; border-top:2px black solid; height:22px; padding:0 0 -2px 5px; margin: -2px 0 -1px 3px;" id="blank">
                &nbsp;</th>
              <th class="slmrow" scope="col">1</th>
              <th class="slmrow" scope="col">2</th>
              <th class="slmrow" scope="col">3</th>
              <th class="slmrow" scope="col">4</th>
            </tr>
            <tr id="gr" style="display:none;" class="row1">
              <th scope="row" id="gross" class="colfix" style="height: 43px">Name</th>
              <td style="height: 43px"></td>
              <td style="height: 43px"></td>
              <td style="height: 43px"></td>
              <td style="height: 43px"></td>
            </tr>
            <tr id="hf" style="display:none;" class="row2">
              <th scope="row" id="holiday" class="colfix">Name</th>
              <td>&nbsp;</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr id="emni" style="display:none;" class="row3">
              <th scope="row" id="empni" class="colfix">Name</th>
              <td>&nbsp;</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr id="umbf" style="display:none;" class="row4">
              <th scope="row" id="umbfee" class="colfix">Name</th>
              <td>&nbsp;</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="row6">
              <th class="colfix" scope="row" id="salary" class="colfix">Name</th>
              <td>&nbsp;</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="row8">
              <th scope="row" id="persallow" class="colfix">Name</th>
              <td>&nbsp;</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="row10">
              <th scope="row" id="taxpaid" class="colfix">Name</th>
              <td>&nbsp;</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr class="row11">
              <th scope="row" id="nicontri" class="colfix" style="height: 43px">
                Name</th>
              <td style="height: 43px"></td>
              <td style="height: 43px"></td>
              <td style="height: 43px"></td>
              <td style="height: 43px"></td>
            </tr>
            <tr id="hidetd" class="row12">
              <th scope="row" id="tdeduct" class="colfix">Name</th>
              <td><em>&nbsp;</em></td>
              <td><em></em></td>
              <td><em></em></td>
              <td><em></em></td>
            </tr>
            <tr class="row13">
              <th scope="row" id="take2" class="colfix">Name</th>
              <td><strong>&nbsp;</strong></td>
              <td><strong></strong></td>
              <td><strong></strong></td>
              <td><strong></strong></td>
            </tr>
            <tfoot>
              <tr id="hidecompare">
                <th class="slmrow" id="compare" style="height:19px;"><span id="comparedesktop">
            Name</span></th>
                <td><strong>&nbsp;</strong></td>
                <td><strong></strong></td>
                <td><strong></strong></td>
                <td><strong></strong></td>
              </tr>
            </tfoot>
          </table>
        </div>

      </div>


    </div>


  </div>
</body>

</html>

Ниже вы можете увидеть, что первый столбец отсутствует в iPhone:

iPhone скриншот прокручиваемой таблицы

1 Ответ

0 голосов
/ 02 августа 2020

Я начал удалять ваш код по частям, чтобы посмотреть, когда проблема исчезнет. Удаление <div class="mscroll"> решило проблему go. Итак, я внимательно рассмотрел css, и оттуда проблема, похоже, в: 

-webkit-overflow-scrolling: touch;

Удалите это из .mscroll , и он будет работать на iphone.

Я изо всех сил пытался понять, почему это происходит. Но я не вижу для этого никаких причин. Я бы предположил, что ваш код немного запутан и, вероятно, где-то есть конфликт.

...