visualizzare menu orizzontale in Device e PC

[Kahm]

salve a tutti
ho un menu orizzontale, il quale per averlo compatibile con i cellulari ho nascosto la scrollbar orizzontale, purtroppo il cliente la vuole vedere quando utilizza il PC!
non so cosa inventarmi, in quanto su PC non si riesce a tascinare
consigli?

.parent {
  width: 100%;
  height: 30px;
  border: 1px solid #AAA;
  white-space: nowrap;
  overflow-y: hidden;
}

.child {
  height: 45px;
  overflow-x: auto;
}<div class="parent">
  <div class="child">
    <table id="ctl00_ContentPlaceHolder1_DataList1" cellspacing="0" border="0" style="border-collapse:collapse;">
      <tbody>
        <tr>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl00_hypCateg" href="Index.aspx?CodCateg=19">cat 1</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl01_hypCateg" href="Index.aspx?CodCateg=22">cat 2</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl02_hypCateg" href="Index.aspx?CodCateg=17">cat 3</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl03_hypCateg" href="Index.aspx?CodCateg=9">cat 23</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl04_hypCateg" href="Index.aspx?CodCateg=12">cat 5</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl05_hypCateg" href="Index.aspx?CodCateg=7">FARINA DA GRANI ANTICHI</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl06_hypCateg" href="Index.aspx?CodCateg=13">FRUTTA</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl07_hypCateg" href="Index.aspx?CodCateg=15">FUNGHI NATURALI</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl08_hypCateg" href="Index.aspx?CodCateg=16">MAIALE</a> &nbsp;
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div> 

[neo1976]

ciao Kahm prova così:

[neo1976]

Ciao Kahm prova così:

.parent {
  width: 100%;
  height: 30px;
  border: 1px solid #AAA;
  white-space: nowrap;
  overflow-y: hidden;
}


@media(max-width:768px){ .child {height: 30px;
  overflow-x: hidden;
}}
@media(min-width:769px){ .child {height: 45px;
  overflow-x: auto !important;
}}
<div class="parent">
  <div class="child">
    <table id="ctl00_ContentPlaceHolder1_DataList1" cellspacing="0" border="0" style="border-collapse:collapse;">
      <tbody>
        <tr>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl00_hypCateg" href="Index.aspx?CodCateg=19">cat 1</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl01_hypCateg" href="Index.aspx?CodCateg=22">cat 2</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl02_hypCateg" href="Index.aspx?CodCateg=17">cat 3</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl03_hypCateg" href="Index.aspx?CodCateg=9">cat 23</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl04_hypCateg" href="Index.aspx?CodCateg=12">cat 5</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl05_hypCateg" href="Index.aspx?CodCateg=7">FARINA DA GRANI ANTICHI</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl06_hypCateg" href="Index.aspx?CodCateg=13">FRUTTA</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl07_hypCateg" href="Index.aspx?CodCateg=15">FUNGHI NATURALI</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl08_hypCateg" href="Index.aspx?CodCateg=16">MAIALE</a> &nbsp;
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

[neo1976]

ciao Kahm ecco la soluzione, l'ho testata:

.parent {
width: 100%;
height: 30px;
border: 1px solid #AAA;
white-space: nowrap;
overflow-y: hidden;
}


@media(max-width:768px){ .child {height: 30px;
overflow-x: hidden;
}}
@media(min-width:769px){ .child {height: 45px;
overflow-x: auto !important;display: inline-block;
}}
<div class="parent">
<div class="child">
<table id="ctl00_ContentPlaceHolder1_DataList1" cellspacing="0" border="0" style="border-collapse:collapse;">
<tbody>
<tr>
<td>
&nbsp;
<a id="ctl00_ContentPlaceHolder1_DataList1_ctl00_hypC ateg" href="Index.aspx?CodCateg=19">cat 1</a> &nbsp;
</td>
<td>
&nbsp;
<a id="ctl00_ContentPlaceHolder1_DataList1_ctl01_hypC ateg" href="Index.aspx?CodCateg=22">cat 2</a> &nbsp;
</td>
<td>
&nbsp;
<a id="ctl00_ContentPlaceHolder1_DataList1_ctl02_hypC ateg" href="Index.aspx?CodCateg=17">cat 3</a> &nbsp;
</td>
<td>
&nbsp;
<a id="ctl00_ContentPlaceHolder1_DataList1_ctl03_hypC ateg" href="Index.aspx?CodCateg=9">cat 23</a> &nbsp;
</td>
<td>
&nbsp;
<a id="ctl00_ContentPlaceHolder1_DataList1_ctl04_hypC ateg" href="Index.aspx?CodCateg=12">cat 5</a> &nbsp;
</td>
<td>
&nbsp;
<a id="ctl00_ContentPlaceHolder1_DataList1_ctl05_hypC ateg" href="Index.aspx?CodCateg=7">FARINA DA GRANI ANTICHI</a> &nbsp;
</td>
<td>
&nbsp;
<a id="ctl00_ContentPlaceHolder1_DataList1_ctl06_hypC ateg" href="Index.aspx?CodCateg=13">FRUTTA</a> &nbsp;
</td>
<td>
&nbsp;
<a id="ctl00_ContentPlaceHolder1_DataList1_ctl07_hypC ateg" href="Index.aspx?CodCateg=15">FUNGHI NATURALI</a> &nbsp;
</td>
<td>
&nbsp;
<a id="ctl00_ContentPlaceHolder1_DataList1_ctl08_hypC ateg" href="Index.aspx?CodCateg=16">MAIALE</a> &nbsp;
</td>
</tr>
</tbody>
</table>
</div>
</div>