I have a table similar to This one that looks like:
<table class="DynaTable">
<tr class="DynaTableHead">
<th class="DynaTableHeadCell-1">col 1</th>
<th class="DynaTableHeadCell-2">col 2</th>
<th class="DynaTableHeadCell-3">col 3</th>
<th class="DynaTableHeadCell-4">col 4</th>
<th class="DynaTableHeadCell-5">col 5</th>
</tr>
<tr class="DynaTableRow">
<td class="DynaTableRowCell-1">cell 1-1</td>
<td class="DynaTableRowCell-2">cell 1-2</td>
<td class="DynaTableRowCell-3">cell 1-3</td>
<td class="DynaTableRowCell-4">cell 1-4</td>
<td class="DynaTableRowCell-5">cell 1-5</td>
</tr>
<tr class="DynaTableRow">
<td class="DynaTableRowCell-1">cell 2-1</td>
<td class="DynaTableRowCell-2">cell 2-2</td>
<td class="DynaTableRowCell-3">cell 2-3</td>
<td class="DynaTableRowCell-4">cell 2-4</td>
<td class="DynaTableRowCell-5">cell 2-5</td>
</tr>
<tr class="DynaTableRow">
<td class="DynaTableRowCell-1">cell 3-1</td>
<td class="DynaTableRowCell-2">cell 3-2</td>
<td class="DynaTableRowCell-3">cell 3-3</td>
<td class="DynaTableRowCell-4">cell 3-4</td>
<td class="DynaTableRowCell-5">cell 3-5</td>
</tr>
<tr class="DynaTableRow">
<td class="DynaTableRowCell-1">cell 4-1</td>
<td class="DynaTableRowCell-2">cell 4-2</td>
<td class="DynaTableRowCell-3">cell 4-3</td>
<td class="DynaTableRowCell-4">cell 4-4</td>
<td class="DynaTableRowCell-5">cell 4-5</td>
</tr>
</table>
Want I want to do when the user loads the page on a mobile device, make it display like This one that looks like:
<table class="DynaTable">
<tr class="DynaTableHead">
<th rowspan="2" class="DynaTableHeadCell-1">col 1</th>
<th class="DynaTableHeadCell-2">col 2</th>
<th class="DynaTableHeadCell-3">col 3</th>
<th class="DynaTableHeadCell-4">col 4</th>
<th class="DynaTableHeadCell-5">col 5</th>
</tr>
<tr class="DynaTableHead">
<th class="DynaTableHeadCell-X" colspan="3">col 3</th>
</tr>
<tr class="DynaTableRow">
<td rowspan="2" class="DynaTableRowCell-1">cell 1-1</td>
<td class="DynaTableRowCell-2">cell 1-2</td>
<td class="DynaTableRowCell-3">cell 1-3</td>
<td class="DynaTableRowCell-4">cell 1-4</td>
<td class="DynaTableRowCell-5">cell 1-5</td>
</tr>
<tr>
<td class="DynaTableRowCell-X" colspan="3">cell 1-3</th>
</tr>
<tr class="DynaTableRow">
<td rowspan="2" class="DynaTableRowCell-1">cell 2-1</td>
<td class="DynaTableRowCell-2">cell 2-2</td>
<td class="DynaTableRowCell-3">cell 2-3</td>
<td class="DynaTableRowCell-4">cell 2-4</td>
<td class="DynaTableRowCell-5">cell 2-5</td>
</tr>
<tr>
<td class="DynaTableRowCell-X" colspan="3">cell 2-3</th>
</tr>
<tr class="DynaTableRow">
<td rowspan="2" class="DynaTableRowCell-1">cell 3-1</td>
<td class="DynaTableRowCell-2">cell 3-2</td>
<td class="DynaTableRowCell-3">cell 3-3</td>
<td class="DynaTableRowCell-4">cell 3-4</td>
<td class="DynaTableRowCell-5">cell 3-5</td>
</tr>
<tr>
<td class="DynaTableRowCell-X" colspan="4">cell 3-3</th>
</tr>
<tr class="DynaTableRow">
<td rowspan="2" class="DynaTableRowCell-1">cell 4-1</td>
<td class="DynaTableRowCell-2">cell 4-2</td>
<td class="DynaTableRowCell-3">cell 4-3</td>
<td class="DynaTableRowCell-4">cell 4-4</td>
<td class="DynaTableRowCell-5">cell 4-5</td>
</tr>
<tr>
<td class="DynaTableRowCell-X" colspan="3">cell 4-3</th>
</tr>
</table>
How can I make this work using only HTML and CSS? I "can" use JavaScript/jquery, but I would REALLY rather not. The output is what is important. I can go from the first output to the second output when mobile loads it, OR I can go from mobile version to desktop version -- doing the latter would make avoiding JavaScript less important. Does CSS offer rowspan/colspan options now (it didn't use to last time I tried, but that was 3-5 years ago)?
If you are wanting to maintain HTML without using a server-side scripting language like ASP, CGI or PHP then you cannot avoid using JavaScript. Otherwise you have no means of detecting which device or OS is being used.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.