kunthawat/dealplustech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Make product tables responsive for mobile

Browse Source 
- Add horizontal scroll wrapper for narrow screens
- Reduce font sizes on mobile (text-xs md:text-sm)
- Add padding adjustments for mobile (px-3 py-2)
- Add overflow-x-auto with negative margins for full-width scroll
- Enable word break on cell content
- Set min-width 600px for table readability
- Add border-collapse for cleaner borders

Tables now scroll horizontally on mobile with better readability.
This commit is contained in:
Kunthawat Greethong
2026-03-02 13:41:24 +07:00
parent 6db276d237
commit 28d20b39c7
1 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
dealplustech-astro/src/pages/products/[slug].astro
View File

@@ -52,21 +52,43 @@ const productTables = productData?.productTables || [];
</h2>
<div class="space-y-10">
{productTables.map((table, tableIndex) => (
<div class="bg-white rounded-2xl border-2 border-secondary-200 overflow-hidden shadow-lg">
<h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-secondary-800 p-5 md:p-6 bg-secondary-50 border-b-2 border-secondary-200">
<div class="bg-white rounded-2xl border-2 border-secondary-200 shadow-lg">
<h3 class="text-lg md:text-xl lg:text-2xl font-semibold text-secondary-800 p-4 md:p-6 bg-secondary-50 border-b-2 border-secondary-200">
{table.tableName}
</h3>
<div class="overflow-x-auto">
<table class="w-full min-w-[700px]">
<div class="w-full overflow-x-auto -mx-2 md:mx-0">
<div class="px-2 md:px-0">
<table class="w-full min-w-[600px] border-collapse">
<thead>
<tr class="bg-primary-100">
{table.headers.map((header, headerIndex) => (
<th class="px-5 py-4 md:px-6 md:py-5 text-left text-base md:text-lg lg:text-xl font-bold text-primary-800 border-b-2 border-primary-300">
<th class="px-3 py-2 md:px-4 md:py-3 text-left text-xs md:text-sm lg:text-base font-bold text-primary-800 border-b-2 border-primary-300 whitespace-nowrap">
{header}
</th>
))}
</tr>
</thead>
<tbody>
{table.rows.map((row, rowIndex) => (
<tr class={rowIndex % 2 === 0 ? 'bg-white' : 'bg-secondary-50'}>
{row.map((cell, cellIndex) => (
<td class="px-3 py-2 md:px-4 md:py-3 text-xs md:text-sm lg:text-base text-secondary-700 border-b border-secondary-100 break-words max-w-[200px] md:max-w-none">
{cell}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
))}
</div>
</section>
)})}
</tr>
</thead>
<tbody>
{table.rows.map((row, rowIndex) => (
<tr class={rowIndex % 2 === 0 ? 'bg-white' : 'bg-secondary-50'}>