2

My Bootstrap table style color not working on window.print() preview.

This is the result that the table style not work : https://i.stack.imgur.com/eyxjl.jpg

This is my code

<table class="table table-bordered" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th class="table-info">NIP</th>
            <th class="table-info">Nama</th>
            <th class="table-info">Hak Akses</th>
            <th class="table-info">Kelas Mengajar</th>
        </tr>
    </thead>
    <tbody>
        <?php
            $show = mysqli_query($conn, "SELECT * FROM user");
            while ($row = mysqli_fetch_assoc($show)) {
                echo "
                    <tr>
                        <td>$row[nip]</td>
                        <td>$row[nama]</td>
                        <td>$row[role]</td>
                        <td>$row[kelas]</td>
                    </tr>
                ";
            }
        ?>
    </tbody>
</table>

I want the result window.print() the function is the same as the page I created that contains a table with bootstrap styles.

Jainil
  • 1,488
  • 1
  • 21
  • 26
Heru Setiawan
  • 33
  • 6
  • It looks like the only thing that's missing is the table head's background color? That can be turned on in the print settings. Click on "Setelan lain" and look for an appropriate option. –  Nov 12 '19 at 11:14
  • have you checked https://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview – Amanjot Kaur Nov 12 '19 at 11:18
  • @ChrisG thankyou for helping, but i already tried that, i just want to change the table head color only – Heru Setiawan Nov 12 '19 at 11:19
  • What do you mean, "you want to change the table head color only"? Chrome should make the header blue if you turn on "background graphics", is this happening or not? –  Nov 12 '19 at 11:21
  • @AmanjotKaur already check that, he used manual css, mine using bootstrap, if i use manually css it works properly, but not while i use bootstrap – Heru Setiawan Nov 12 '19 at 11:21
  • @ChrisG I already tried another option on chrome print preview page and checked the "background graphics" option – Heru Setiawan Nov 12 '19 at 11:23
  • @HeruSetiawan check Bootstrap color on print https://stackoverflow.com/questions/33410724/bootstrap-print-css-removes-background-color – Amanjot Kaur Nov 12 '19 at 11:24
  • 1
    Possible duplicate of [Bootstrap print CSS removes background color](https://stackoverflow.com/questions/33410724/bootstrap-print-css-removes-background-color) –  Nov 12 '19 at 11:33

1 Answers1

1

Your javascript function is opening a new window, and creating a new document which doesn't contain any link to your stylesheet. Update your function so that it adds the relevant stylesheet link to the new document: // Add the stylesheet link and inline styles to the new document:

printWindow.document.write('<link rel="stylesheet" href="css/test.css">');
ali sohi
  • 11
  • 3