Использование таблиц HTML на мобильном сайте - PullRequest
Новая
       1

Использование таблиц HTML на мобильном сайте

0 голосов
/ 26 ноября 2018

У меня есть веб-страница, которую я создаю, на которой будет размещена информация о сотрудниках для церкви.Есть 12 столбцов данных.Столбцы включают в себя:

Позиция
Имя, Город проживания
Кнопка редактирования
Флажок для Религиозного брата
Флажок для Религиозной сестры
Флажок для мирянина
Флажок дляПри обучении VIRTUS
Флажок для проверки наличия фона
Флажок для полученного стандартного кодекса поведения
Флажок для полученной политики в отношении технологий / социальных сетей
Флажок для полученного кодекса поведения молодежи (если он не достиг 18 лет)
Флажок для удаления сотрудника

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

Некоторые исследования показали, что я не должен пытаться воссоздать, так сказать, колесо.Если таблица является лучшим инструментом для отображения информации, используйте ее.Я сделал это, но таблица не будет сжиматься ниже ширины 700px, а мобильные устройства, такие как телефон, уменьшают масштаб, чтобы соответствовать ширине страницы.

Я бы хотел, чтобы таблица оборачивала ячейки в каждом ряду после кнопки редактирования, чтобы флажки перемещались на вторую строку, когда ширина экрана становится небольшой.Мне интересно, должен ли я вернуться и попытаться воссоздать таблицу, используя DIVs, или есть ли способ заставить таблицу обернуться.Чего я не могу понять, так это заставить все DIV в строке поддерживать одинаковую высоту и ширину, и как получить, чтобы все DIV в столбце имели одинаковую ширину.Может быть, я должен прислушаться к своему собственному обучению и попытаться использовать стол.Я мог бы вложить две таблицы в каждой строке, чтобы информация о человеке была в одной таблице, а флажки - в другой с двумя рядом.Таким образом, таблицы могут перемещаться, когда экран недостаточно широк, чтобы отображать все в одной строке.Неа.Не было бы никакого способа принудить таблицу высоты и ширины к таблице без идентификаторов и CSS.Это было бы также грязно.

Вот копия кода, который я пробовал, который переносит вторую половину строки под первую половину, но выглядит не очень красиво: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.arial10pt{
    font-family:arial;
    font-size:10pt; 
}
.col1 {
    width:5%; !important;
    height:55px !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
.col2 {
    width:15% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}

.col3 {
    width:15%!important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col4 {
    width:5%; !important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col5 {
    width:10% !important;
    height:55px !important;
    font-family:arial !important;
    font-size:10pt !important;  
    vertical-align:middle !important;   
}
.col6 {
    width:10% !important;
    vertical-align:middle;  
    font-family:arial !important;
    font-size:10pt !important;  
}
.col7 {
    width:10% !important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col8 {
    width:10% !important;
    vertical-align:middle !important;   
    font-family:arial !important;
    font-size:10pt !important;  
}
.col9 {
    width:10% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
.col9 {
    width:10% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
.col10 {
    width:10% !important;
    vertical-align:middle !important;
    font-family:arial !important;
    font-size:10pt !important;  
}
</style>

</head>

<body>

 <div style="display:inline-table; width:39%; border:green 1px solid; padding:0; margin:0;" class="arial10pt">


        <table border="1" width="100%" cellspacing="0" cellpadding="0" class="arial10pt" >
        <tr>
        <td class="col1" style="padding:1px;"><strong>No Longer<br />with Parish</strong></td>
         <td class="col2" style="padding:1px;"><strong>Position</strong></td>
        <td class="col3" style="padding:1px;"><strong>Name, City</strong></td>
        <td class="col4" style="padding:1px;"></td>
        </tr>
        </table>
 </div>
  <div style="display:inline-table; width:59%; border:red 1px solid; padding:0; margin:0;" class="arial10pt">
        <table border="1" width="100%" cellspacing="0" cellpadding="0" class="arial10pt">
        <tr>
        <td class="col5" style="padding:1px;"><div style="text-align:center;" ><strong>Religious<br>Affiliation</strong></div></td>
        <td class="col5" style="padding:1px;"><div style="text-align:center;" ><strong>VIRTUS</strong></div></td>
        <td class="col6" style="padding:1px;"><div style="text-align:center; "><b>Background<br />Check</b></div></td>
        <td class="col7" style="padding:1px;" ><div style="text-align:center; "><strong>Standard Code <br />of Conduct</strong></div></td>
        <td class="col8" style="padding:1px;"><div style="text-align:center;"><strong>Technology / <br />Social Media</strong></div></td>
        <td class="col9" style="padding:1px;"><div style="text-align:center; "><b>Youth (under 18)<br />Code of Conduct</b></div></td>
        </tr>
        </table>
</div><br>
 <div style="display:inline-table; width:39%; border:green 1px solid; padding:0; margin:0;" class="arial10pt">



        <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
        <td class="col1" style="padding:1px;">
            <div style="text-align:center;">
            <form method="Post" action="NLWP.aspx">
            <input type="checkbox" onclick="del(this.form)"/>
            <input type="hidden" value="20401" name="ID">
            </form>
            </div>
         </td>
         <td class="col2" style="padding:1px;">
            <div style="text-align:left;">Associate Pastor - Parochial Vicar</div>
         </td>
         <td class="col3" style="padding:1px;">
            Fr. John Jacob<br />Sometown
         </td> 
         <td class="col4" style="padding:1px;">
            <div style="text-align:center;">
            <form action="#popup1" method="post" data-toggle="modal">
            <input type="hidden" value="18294" name="people_ID"/>
            <input type="hidden" value="20401" name="parishPositions_ID"/>
            <input name="which" type="hidden" value="2" />
            <input type="submit" value="Edit"/>
            </form>
            </div>
        </td>
        </tr>
        </table>






</div>
 <div style="display:inline-table; width:59%; border:red 1px solid;  padding:0; margin:0;" class="arial10pt">
        <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
        <td class="col5" style="padding:1px;">
            <div style="text-align:center;">
            Religious Brother
            </div>
        </td>
        <td class="col6" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />
            </div>
        </td>
        <td class="col7" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />
            </div>
        </td>
        <td class="col8" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
        </td>    
        <td class="col9" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
        </td>
        <td class="col10" style="padding:1px;">
            <div style="text-align:center; word-wrap: break-word;"> 
            <input type="checkbox"  disabled="disabled"/> 
            </div>
        </td>  
        </tr>
        </table>
</div><br>
 <div style="display:inline-table; width:39%; border:green 1px solid; padding:0; margin:0;" class="arial10pt">
        <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
        <td class="col1" style="padding:1px;">
            <div style="text-align:center;">
            <form method="Post" action="NLWP.aspx">
            <input type="checkbox" onclick="del(this.form)"/>
            <input type="hidden" value="21874" name="ID">
            </form>
            </div>
        </td>
        <td class="col2" style="padding:1px;">
            <div style="text-align:left;">Deacon</div>
        </td>
        <td class="col3" style="padding:1px;">
            <div style="text-align:left;"> Deacon&nbsp;Tim Smith<br />Some City&nbsp;</div>
        </td> 
        <td class="col4" style="padding:1px;">
            <div style="text-align:center;">
            <form action="#popup1" method="post" data-toggle="modal">
            <input type="hidden" value="15778" name="people_ID"/>
            <input type="hidden" value="21874" name="parishPositions_ID"/>
            <input name="which" type="hidden" value="2" />
            <input type="submit" value="Edit"/>
            </form>
            </div>
         </td>
         </tr>
         </table>
</div>
 <div style="display:inline-table; width:59%; border:red 1px solid;  padding:0; margin:0;" class="arial10pt">
         <table border="1" width="100%" cellspacing="0" cellpadding="0">
         <tr>
         <td class="col5" style="padding:1px;">
            <div style="text-align:center;">
            Religious Brother
            </div>
        </td>
         <td class="col6" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />
            </div>
         </td>
         <td class="col7" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            <br />4/8/2016
            </div>
         </td>
         <td class="col8" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
         </td>    
         <td class="col9" style="padding:1px;">
            <div style="text-align:center;">
            <input type="checkbox" checked = "checked" disabled="disabled"/> 
            </div>
         </td>
         <td class="col10" style="padding:1px;">
            <div style="text-align:center;"> 
            <input type="checkbox"  disabled="disabled"/> 
            </div>
         </td>  
         </tr>
         </table>
</div>  
</body>
</html>

Я в тупике.

1 Ответ

0 голосов
/ 26 ноября 2018

Вы пробовали реализовать начальную загрузку?Вы можете использовать это: 

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Для справки: https://www.w3schools.com/bootstrap/bootstrap_tables.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...