Blog table responsive updated

This commit is contained in:
akash 2025-10-16 18:47:10 +05:30
parent 98da0616df
commit 5a5e57113b
2 changed files with 71 additions and 27 deletions

View File

@ -3567,6 +3567,47 @@
font-weight: 700; font-weight: 700;
} }
.custom-table {
border: 1px solid #000;
border-collapse: collapse;
width: 100%;
}
.custom-table th,
.custom-table td {
border: 1px solid #000;
padding: 8px;
text-align: left;
vertical-align: middle;
}
.custom-table thead {
background-color: #f8f9fa;
}
/* ✅ Responsive stacking below 576px */
@media (max-width: 576px) {
.custom-table thead {
display: none;
}
.custom-table,
.custom-table tbody,
.custom-table tr,
.custom-table td {
display: block;
width: 100%;
}
.custom-table td {
text-align: left;
padding: 8px;
position: relative;
}
.custom-table td::before {
content: attr(data-label);
font-weight: bold;
display: block;
margin-bottom: 4px;
}
}
@media (max-width: 425px) { @media (max-width: 425px) {
/* .sec-title-2 { /* .sec-title-2 {
display: flex; display: flex;

View File

@ -921,33 +921,36 @@ const Blogs = [
<h3>Typical Session Durations at Rapha Rehab</h3> <h3>Typical Session Durations at Rapha Rehab</h3>
<p>Although each case is unique, heres a general guideline based on what clients commonly experience:</p> <p>Although each case is unique, heres a general guideline based on what clients commonly experience:</p>
<table style="width:100%; border-collapse: collapse; border: 1px solid #000;"> <div class="container my-4">
<thead> <div class="table-responsive">
<tr> <table class="custom-table">
<th style="border: 1px solid #000; padding: 8px; text-align: left;">Type of Visit</th> <thead>
<th style="border: 1px solid #000; padding: 8px; text-align: left;">Duration</th> <tr>
<th style="border: 1px solid #000; padding: 8px; text-align: left;">What It Usually Includes</th> <th>Type of Visit</th>
</tr> <th>Duration</th>
</thead> <th>What It Usually Includes</th>
<tbody> </tr>
<tr> </thead>
<td style="border: 1px solid #000; padding: 8px;">Initial Assessment / First Visit</td> <tbody>
<td style="border: 1px solid #000; padding: 8px;">60 minutes</td> <tr>
<td style="border: 1px solid #000; padding: 8px;">Hands-on techniques, treatment plan</td> <td data-label="Type of Visit">Initial Assessment / First Visit</td>
</tr> <td data-label="Duration">60 minutes</td>
<tr> <td data-label="What It Usually Includes">Hands-on techniques, treatment plan</td>
<td style="border: 1px solid #000; padding: 8px;">Follow-up (standard)</td> </tr>
<td style="border: 1px solid #000; padding: 8px;">30 to 45 minutes</td> <tr>
<td style="border: 1px solid #000; padding: 8px;">Thorough evaluation, discussion of history, initial hands-on therapy, guided exercises, adjustments</td> <td data-label="Type of Visit">Follow-up (standard)</td>
</tr> <td data-label="Duration">30 to 45 minutes</td>
<tr> <td data-label="What It Usually Includes">Thorough evaluation, discussion of history, initial hands-on therapy, guided exercises, adjustments</td>
<td style="border: 1px solid #000; padding: 8px;">Extended or more complex cases</td> </tr>
<td style="border: 1px solid #000; padding: 8px;">45 to 60+ minutes</td> <tr>
<td style="border: 1px solid #000; padding: 8px;">Treatment, combined modalities</td> <td data-label="Type of Visit">Extended or more complex cases</td>
</tr> <td data-label="Duration">45 to 60+ minutes</td>
</tbody> <td data-label="What It Usually Includes">Treatment, combined modalities</td>
</table> </tr>
</tbody>
</table>
</div>
</div>
<p class="mt-3">So when you book physiotherapy in Mississauga, Ontario or physio Mississauga, youll want to check what standard session means at each clinic. At Rapha Rehab, their therapists typically allow enough time for quality care.</p> <p class="mt-3">So when you book physiotherapy in Mississauga, Ontario or physio Mississauga, youll want to check what standard session means at each clinic. At Rapha Rehab, their therapists typically allow enough time for quality care.</p>
<h3>What Does a Physiotherapy Session Involve?</h3> <h3>What Does a Physiotherapy Session Involve?</h3>