заголовок таблицы календаря появится сбоку на экране мобильного устройства

#html #jquery #css #responsive

Вопрос:

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

для мобильного представления я хотел бы, чтобы заголовок таблицы состоял из дня недели, который должен быть слева, и даты и посещаемости в той же строке, соответствующей дню. Что-то похожее на календарь Outlook

   <table style="border-collapse: collapse;font-size:14px;padding:5px;margin-left:auto;margin-right:auto;border:1px solid black;line-height:25px;" border=1>
<tr style="height:50px;">
    <td style="width:100px;font-weight:bolder;text-align:center;color:#FFFFFF;background-color:red;font-size:16px;">Sun</td>
    <td style="width:100px;font-weight:bolder;text-align:center;font-size:16px;">Mon</td>
    <td style="width:100px;font-weight:bolder;text-align:center;font-size:16px;">Tue</td>
    <td style="width:100px;font-weight:bolder;text-align:center;font-size:16px;">Wed</td>
    <td style="width:100px;font-weight:bolder;text-align:center;font-size:16px;">Thu</td>
    <td style="width:100px;font-weight:bolder;text-align:center;font-size:16px;">Fri</td>
    <td style="width:100px;font-weight:bolder;text-align:center;font-size:16px;">Sat</td>
</tr>

    <tr style="height:50px;">
        <td colspan="7" style="text-align:center;ont-weight:bolder;background-color:#33b5e5;"><h1>January</h1></td>
    </tr>
    <tr style="height:70px;">
            
                <td style="width:100px;background-color:lightgrey;">amp;nbsp;</td>
                <td style="width:100px;background-color:lightgrey;">amp;nbsp;</td>
                <td style="width:100px;background-color:lightgrey;">amp;nbsp;</td>
                <td style="width:100px;background-color:lightgrey;">amp;nbsp;</td>
                <td style="width:100px;background-color:#ffffff;">amp;nbsp;</td>
      </tr>
</table>
 

я намерен сделать так, чтобы дни недели отображались в левой части экрана, потому что даты (справа) будут отображать соответствующую дату, общую посещаемость и возможность нажатия на экране мобильного устройства. При нажатии он перенаправится на страницу регистрации соответствующего участника на выбранную дату.

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

Комментарии:

1. У вас есть width:100px; в ТД. Когда вы нажимаете на него, он становится шире, чем экран мобильного телефона. Вместо этого используйте дисплей: встроенный-гибкий.