CODEWITHSUNDEEP
javascripthtmlcsshtml-tablecss-tables
ShoeMaker
ShoeMaker

Reputation: 833

How do I make CSS control my HTML table?

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)?

Upvotes: 1

Views: 604

Answers (2)

syrkull
syrkull

Reputation: 2344

1- you can style your website by using the fluid method see this

2- you can do it by using media type in CSS see this

Upvotes: 3

WilliamK
WilliamK

Reputation: 1

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.

Upvotes: -1

Related Questions