locked
Print View RRS feed

  • Question

  • User-1025482824 posted

    For one of the pages of my website I am using the Accordion example in bootstrap 4.  boot strap example

    I also have a print view css page that opens all accordions automatically when printed. Is there a way to modify the print view css to put those divs into some sort of table. When I try to put the <table> ,<th>, <tr> , <td> around the divs nothing happens.  

    I guess what I'm asking is if there is a way to modify the layout of the data with css or html whilst using boot strap. 

    Wednesday, June 27, 2018 2:08 PM

All replies

  • User1520731567 posted

    Hi ruby888,

    ruby888

    Is there a way to modify the print view css to put those divs into some sort of table. When I try to put the <table> ,<th>, <tr> , <td> around the divs nothing happens.  

    Do you want to show the accordions in table?

    I make a demo according to your descriptions,I try the method that putting the <table> ,<th>, <tr> , <td> around the divs as your said.

    I still use data-toggle="collapse", data-target="xxx" in <table>.

    View:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
    <style>
        .hiddenRow {
            padding: 0 !important;
        }
    </style>
    <table class="table table-condensed" style="border-collapse:collapse;">
        <thead>
            <tr>
                <th>#</th>
                <th>Title</th>
            </tr>
        </thead>
        <tbody>
            <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
                <td>1</td>
                <td>  Collapsible Group Item #1</td>
            </tr>
            <tr>
                <td colspan="2" class="hiddenRow"><div class="accordian-body" id="demo1"> Demo1 </div> </td>
            </tr>
            <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
                <td>2</td>
                <td>  Collapsible Group Item #2</td>
            </tr>
            <tr>
                <td colspan="2" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td>
            </tr>
            <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
                <td>3</td>
                <td>  Collapsible Group Item #3</td>
            </tr>
            <tr>
                <td colspan="2" class="hiddenRow"><div id="demo3" class="accordian-body collapse">Demo3</div></td>
            </tr>
    
        </tbody>
    </table>

    How it works:

    You could add some attributes about accordions according to your need.

    More details, you could refer to this link:

    https://stackoverflow.com/questions/16389775/twitter-bootstrap-use-collapse-js-on-table-cells-almost-done

    Best Regards.

    Yuki Tao

    Thursday, June 28, 2018 6:24 AM