2015-02-28 2 views
-2
<style> #gallery_t_ta {position: fixed; top: 15%; left: -10px; width: 300px; border-radius: 10px; background-color: #ffffff; padding: 10px; width: calc(100% - 310px); max-width: calc(100% - 310px); height: 100px; max-height: 100px; overflow-x: auto;} #gallery_t_ta td{width: 150px; max-width: 150px !important; overflow-y: hidden;}</style> 
<table id="gallery_t_ta"> 
<tr> 
    <td> 
     <span id="t1n">Twister 10ct (2pk)</span><br> 
     <img src="./product/twister.png" height="50" width="50"><br> 
     <span id="t1p">9.00</span><br> 
     <button onclick="add1()">Add To Cart</button> 
    </td> 
    <td> 
     <span id="t1n">Twister 10ct (2pk)</span><br> 
     <img src="./product/twister.png" height="50" width="50"><br> 
     <span id="t1p">9.00</span><br> 
     <button onclick="add1()">Add To Cart</button> 
    </td> 
    <td> 
     <span id="t1n">Twister 10ct (2pk)</span><br> 
     <img src="./product/twister.png" height="50" width="50"><br> 
     <span id="t1p">9.00</span><br> 
     <button onclick="add1()">Add To Cart</button> 
    </td> 
</tr> 
</table> 

ОК, поэтому у меня это. ширина не работает на td, она продолжает уменьшаться, когда я рекламирую больше td. также прокрутка x не работает.max wide не работает

Разве это невозможно?

Я хочу иметь возможность прокручивать влево и вправо все предметы. Я делал это с помощью y прокрутки раньше, возможно, это невозможно с помощью x.

ответ

0

Set мин-ширина: 150px;

Также я считаю, что вам нужен x-scroll Надеюсь, что код ниже поможет вашей проблеме.

<style> 
    #gallery_t_ta td{ 
     min-width: 150px; 
    } 
</style> 
<div style="max-width: 150px; overflow-x: auto;"> 
    <table id="gallery_t_ta"> 
     <tr> 
      <td> 
       <span id="t1n">Twister 10ct (2pk)</span><br> 
       <span id="t1p">9.00</span><br> 
       <button onclick="">Add To Cart</button> 
      </td> 
      <td> 
       <span id="t2n">Twister 10ct (2pk)</span><br> 
       <span id="t2p">9.00</span><br> 
       <button onclick="">Add To Cart</button> 
      </td> 
      <td> 
       <span id="t3n">Twister 10ct (2pk)</span><br> 
       <span id="t3p">9.00</span><br> 
       <button onclick="">Add To Cart</button> 
      </td> 
     </tr> 
    </table> 
</div> 
0

Вы должны дать свой <td> элемент а width или min-width.

#gallery_t_ta td{ 
    width: 150px; 
} 

Кроме того, вместо того, чтобы использовать CSS встроенный в тегах или в <head> вашего HTML-файла, это лучшие практики, чтобы положить все ваши CSS в отдельный файл и связать его с:

<link href=yourfile.css rel=stylesheet type=text/css> 

Это улучшит ваш код и избавит вас от больших проблем в будущем, когда вы используете свой CSS для применения стилей к нескольким страницам HTML. Таким образом, у вас не будет избыточного кода, который необходимо обновить в нескольких местах, чтобы сделать одно изменение.

0
<style> #gallery {position: fixed; top: 15%; left: -10px; background-color: #ffffff; width: calc(100% - 310px); max-width: calc(100% - 310px); height: 150px; max-height: 150px; overflow-x: auto; overflow-y: hidden; border-radius: 10px;} #gallery td{min-width: 150px; min-height: 150px; max-width: 150px; max-height: 150px;}</style> 

<div id="gallery"> 
<table><tr><td> 
     <span id="t1n">Twister 10ct (2pk)</span><br> 
     <img src="./product/twister.png" height="50" width="50"><br> 
     <span id="t1p">9.00</span><br> 
     <button onclick="add1()">Add To Cart</button> 
    </td> 

    <td> 
     <span id="t1n">Twister 10ct (2pk)</span><br> 
     <img src="./product/twister.png" height="50" width="50"><br> 
     <span id="t1p">9.00</span><br> 
     <button onclick="add1()">Add To Cart</button> 
    </td> 
    <td> 
     <span id="t1n">Twister 10ct (2pk)</span><br> 
     <img src="./product/twister.png" height="50" width="50"><br> 
     <span id="t1p">9.00</span><br> 
     <button onclick="add1()">Add To Cart</button> 
    </td> 
    <td> 
     <span id="t1n">Twister 10ct (2pk)</span><br> 
     <img src="./product/twister.png" height="50" width="50"><br> 
     <span id="t1p">9.00</span><br> 
     <button onclick="add1()">Add To Cart</button> 
    </td></tr></table> 
</div> 

Исправлено. Это работает, если у кого-то еще есть эта проблема. Нижняя сторона изменяет нижнюю часть div (закругленные края) на квадратную.

Смежные вопросы