Как сделать эту таблицу отзывчивой?

Это таблица со встроенными стилями. Это не идеально подходит для реагирования, поэтому мне нужно найти другой способ сделать таблицу. Я хочу, чтобы он выглядел так, когда экран имеет полный размер, примерно 1140 пикселей и выше. Это не обязательно должна быть таблица, и я открыт для чего угодно. Может быть, DIV с медиа-запросами будет лучше.Как сделать эту таблицу отзывчивой?

Это страница входа в систему, и когда она сжимается, я хочу, чтобы кнопки и изображение увеличивались и занимали больше места. Кнопки и изображение должны быть сверху друг на друга при расчете размера, я это понимаю. Надежда сохранить макет похож, когда она полноразмерная к одному здесь:

<table style="width:100%;height:80%;margin-top:10px"> 
     <tbody><tr> 

    <td style="padding-top:10px;text-align:right;" > 
     <button style="border-radius:15px; font-size:22px;color:#e7e7e7;width:150px;height:50px;background-color:orange;box-shadow: 0 0 3px 3px #CCC;" class="btn-help" onclick="gotoHelp()">Help <img src="img/help6.png" style=""> </button> 
    </td> 

      <td style="text-align:center"> 
       <img title="PIV/CAC Login" src="img/piv-image.jpg" style=" cursor:pointer;background-repeat:no-repeat;background-size:contain;font-weight:bold;font-size:20px;width:180px" onclick="window.location.assign(&#39;tabbed.jsp&#39;)"> 
      </td> 
     <td style="padding-top:10px;text-align:left"> 
      <button type="button" style="border-radius:15px; font-size:22px;color:#e7e7e7; width:150px;height:50px; box-shadow: 0 0 3px 3px #CCC;" class="btn btn-success" onclick="window.location.assign(&#39;tabbed.jsp&#39;)"> Login <img src="img/login4.png" style=""></button> 
    </td> 

    </tr> 


    </tbody></table>

https://jsfiddle.net/Lance_Bitner/b3qxu3c3/

источник

2016-03-31 Lance B

Поскольку это не табличные данные, использование '

' сильно обескуражено. Вы можете использовать 'div' для достижения того, чего хотите. Предоставьте JSFiddle или CodePen разделители div и CSS, разделенные в начале. – Roy

ответ

Добавить это строки в CSS

table { 
    width: 100%; 
    border-collapse: collapse; 
} 
@media 
only screen and (max-width: 760px), 
(min-device-width: 768px) and (max-device-width: 1024px) { 
    table, thead, tbody, th, td, tr { 
     display: block; 
     text-align: center !important; 
    } 
}

источник

2016-03-31 13:41:24

работал как шарм! –

<div class="table_main"> 
<table style="width:100%;height:80%;margin-top:10px"> 
     <tbody><tr> 

    <td style="padding-top:10px;text-align:right;" > 
     <button style="border-radius:15px; font-size:22px;color:#e7e7e7;width:150px;height:50px;background-color:orange;box-shadow: 0 0 3px 3px #CCC;" class="btn-help" onclick="gotoHelp()">Help <img src="img/help6.png" style=""> </button> 
    </td> 

      <td style="text-align:center"> 
       <img title="PIV/CAC Login" src="img/piv-image.jpg" style=" cursor:pointer;background-repeat:no-repeat;background-size:contain;font-weight:bold;font-size:20px;width:180px" onclick="window.location.assign(&#39;tabbed.jsp&#39;)"> 
      </td> 
     <td style="padding-top:10px;text-align:left"> 
      <button type="button" style="border-radius:15px; font-size:22px;color:#e7e7e7; width:150px;height:50px; box-shadow: 0 0 3px 3px #CCC;" class="btn btn-success" onclick="window.location.assign(&#39;tabbed.jsp&#39;)"> Login <img src="img/login4.png" style=""></button> 
    </td> 

    </tr> 


    </tbody></table> 
</div>

CSS

.table_main{ 
    width:100%; 
    overflow:auto; 
} 
.table_main table{ 
    width:100%; 
}

источник

2016-03-31 13:20:56

* Поскольку это не табличные данные, использование

настоятельно не рекомендуется. * «Это должен быть ваш первый флаг. – Roy

Это улучшило его @Gaurav, но как мне получить его от прокрутки влево и вправо при размере вниз? Кнопки и изображение просто поверх друг друга, когда страница имеет размер вниз? –

, который будет отличаться от этого метода. Прочитайте эту документацию. Https://css-tricks.com/responsive-data-tables/ –

я обычно не использую тег <table>, <tr> и <td>, но вместо этого я использую <div> тег с классами и определить их в качестве компонентов таблицы в CSS, как

.my_container { 
    display: table; 
} 
.my_rows { 
    display: table-row; 
} 
.my_cells { 
    display: table-cell; 
}

Это имеет много преимуществ, одно из них также иметь возможность использовать совершенно разные параметры display в мультимедийных запросах для небольших экранов. Например, я могу просто разместить все прежние табличные ячейки ниже друг друга (по вертикали) на маленьком экране смартфона вместо горизонтального размещения, используя display: block в запросе на медиа.

Другие преимущества использования таблицы-свойств являются

способность к центру их содержание по горизонтали и вертикально,
возможность их автоматического распределения по заданной ширине время принимая во внимание их содержание
достижение такой же вертикальной высоты для всех «столбцов», включая их фон без необходимость в любых других методах.

источник

2016-03-31 14:08:59 Johannes

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