locked
unbale to draw full width table RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User81789783 posted

    i have below code  ,but its not showing full width  table on screen. it shows space out side div/table any help

    <html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="print.min.js"></script>
    <link href="print.min.css" rel="stylesheet" />


    <style>
        table { table-layout: fixed; }
        table tr th {
            font-size: 13px;
            /*padding:0rem;*/
        }

        table tr td {
            font-size: 10px;
            word-wrap:break-word;
            /*padding:0rem;
            margin:0rem;*/
        }

        #printJS-form {
            border-collapse: collapse;
            border-spacing: 0rem;
            width: 100%;
            padding: 0;
            margin: 0;
            table-layout: fixed;
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>
    <style>
        table tr th {
            font-size: 13px;
            /*padding:0rem;*/
        }

        table tr td {
            font-size: 11px;
            /*padding:0rem;
            margin:0rem;*/
        }

        #printJS-form {
            border-collapse: collapse;
            border-spacing: 0rem;
            width: 100%;
            padding: 0;
            margin: 0;
            table-layout: fixed;
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>
</head>
<body>
    <form id="form1">


        <div class="row">
           
                <div class="table table-responsive" style="width:100%;border-color:red;border:1px solid red">

                    <div class="table" style="width:100%;border:1px solid green;" class="table-responsive">

                        <!--Table-->
                        <table style="width:100%;border-color:red;border:1px solid blue"><tr><td>dsa</td></tr></table>
                     
                        <!--Table-->
                    </div>

                </div>
            </div>
       
    
    </form>
</body>
</html>

    Tuesday, August 20, 2019 6:05 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1520731567 posted

    Hi erum,

    secondly can u help me i need to set td in inner table with red color , td is showing with red color but showing padding from top and bottom i need to set to reomivig padding so that it synhnorize with header

    do you mean you want this effect?

    I find your inner table is red and I just modify margin-left to 0px,like below:

    <html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="print.min.js"></script>
    <link href="print.min.css" rel="stylesheet" />


    <style>
        table {
            table-layout: fixed;
        }

            table tr th {
                font-size: 13px;
                /*padding:0rem;*/
            }

            table tr td {
                font-size: 10px;
                word-wrap: break-word;
                /*padding:0rem;
            margin:0rem;*/
            }

        #printJS-form {
            border-collapse: collapse;
            border-spacing: 0rem;
            width: 100%;
            padding: 0;
            margin: 0;
            /*table-layout: fixed;*/
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>
    <style>
        table tr th {
            font-size: 13px;
            /*padding:0rem;*/
        }

        table tr td {
            font-size: 11px;
            /*padding:0rem;
            margin:0rem;*/
        }

        #printJS-form {
            border-collapse: collapse;
            border-spacing: 0rem;
            width: 100%;
            padding: 0;
            margin: 0;
            /*table-layout: fixed;*/
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>
</head>
<body>
    <form id="form1">


        <div class="row table table-responsive" style="margin-left:0px;">

            <div class="table-responsive" style="width:100%;border-color:red;border:1px solid red">

                <div class="table-responsive" style="width:100%;border:1px solid;">

                    <!--Table-->
                    <table id="printJS-form" class="table table-responsive table-hover table-bordered" style="border-collapse:collapse; border:1px solid  rgb( 229, 231, 233 )">
                        <tr>
                            <td>
                                <table class="table" style="margin-left: 0px;margin-right:-15px;">
                                    <thead>

                                        <tr style="background-color:burlywood;padding:0rem;">

                                            <th style="width:5%;padding:0rem!important;text-align: center;color: darkmagenta;max-width:5%;">Frequency</th>
                                            <th style="max-width:10%;width:10%;padding:0rem!important;text-align: center;color: darkmagenta;">Task Name</th>

                                            <th style="width: 5%;max-width:5%;padding:0rem!important;text-align: center;color: darkmagenta;">Shift</th>
                                            <th style="width: 5%;max-width:5%;padding:0rem!important;text-align: center;color: darkmagenta;">Range</th>


                                            @for (var i = 1; i <= 31; i++)
                                            {


                                            <th style="width:2.5%;max-width:2.5%;padding:0rem!important;text-align: center;color: darkmagenta;">@i</th>
                                            }

                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr>
                                            <td>
                                                <table style="background-color:red">
                                                    <tr>
                                                        <td colspan="35">

                                                            <table>

                                                                <tr>
                                                                    <td rowspan="3" style="padding:0px">Daily</td>
                                                                </tr>

                                                            </table>

                                                        </td>
                                                        <td>

                                                            <table>

                                                                <tr>
                                                                    <td rowspan="3" style="padding:0px">temperture check</td>
                                                                </tr>

                                                            </table>

                                                        </td>
                                                        @*
                                                        <td style="width:100%;padding:0rem!important;text-align: center;color: darkmagenta;max-width:100%;background-color:yellow">

                                                            <table>

                                                                <tr>
                                                                    <td rowspan="3">Check the Temperature of instrument</td>
                                                                </tr>

                                                            </table>

                                                        </td>*@

                                                    </tr>
                                                </table>


                                    </tbody>


                                </table>
                            </td>
                        </tr>
                    </table>

                    <!--Table-->
                </div>

            </div>
        </div>


    </form>
</body>
</html>

    If this is not what you want,please let me know.

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 20, 2019 8:48 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1716253493 posted

    Change

    <div class="row">
    <div class="container-fluid">
            <div class="container-fluid">
                    <!--Table-->
                    <table class="table " style="border-color: red; border: 1px solid blue">
                        <tr>
                            <td>dsa</td>
                        </tr>
                    </table>

                    <!--Table-->
          </div>



    Tuesday, August 20, 2019 7:06 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User81789783 posted

    ok ,i have doe some how with different way

    secondly can u help me i need to set td in inner table with red color , td is showing with red color but showing padding from top and bottom i need to set to reomivig padding so that it synhnorize with header

    <html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="print.min.js"></script>
    <link href="print.min.css" rel="stylesheet" />


    <style>
        table { table-layout: fixed; }
        table tr th {
            font-size: 13px;
            /*padding:0rem;*/
        }

        table tr td {
            font-size: 10px;
            word-wrap:break-word;
            /*padding:0rem;
            margin:0rem;*/
        }

        #printJS-form {
            border-collapse: collapse;
            border-spacing: 0rem;
            width: 100%;
            padding: 0;
            margin: 0;
            /*table-layout: fixed;*/
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>
    <style>
        table tr th {
            font-size: 13px;
            /*padding:0rem;*/
        }

        table tr td {
            font-size: 11px;
            /*padding:0rem;
            margin:0rem;*/
        }

        #printJS-form {
            border-collapse: collapse;
            border-spacing: 0rem;
            width: 100%;
            padding: 0;
            margin: 0;
            /*table-layout: fixed;*/
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>
</head>
<body>
    <form id="form1">


        <div class="row table table-responsive" style="margin-left:0px;" >
           
                <div class="table-responsive" style="width:100%;border-color:red;border:1px solid red">

                    <div class="table-responsive" style="width:100%;border:1px solid;">

                        <!--Table-->
                        <table id="printJS-form" class="table table-responsive table-hover table-bordered" style="border-collapse:collapse; border:1px solid  rgb( 229, 231, 233 )">
                            <tr>
                                <td>
                                    <table class="table" style="margin-left:-15px;margin-right:-15px;">
                                        <thead>

                                            <tr style="background-color:burlywood;padding:0rem;">

                                                <th style="width:5%;padding:0rem!important;text-align: center;color: darkmagenta;max-width:5%;">Frequency</th>
                                                <th style="max-width:10%;width:10%;padding:0rem!important;text-align: center;color: darkmagenta;">Task Name</th>

                                                <th style="width: 5%;max-width:5%;padding:0rem!important;text-align: center;color: darkmagenta;">Shift</th>
                                                <th style="width: 5%;max-width:5%;padding:0rem!important;text-align: center;color: darkmagenta;">Range</th>


                                                @for (var i = 1; i <= 31; i++)
                                                {


                                                    <th style="width:2.5%;max-width:2.5%;padding:0rem!important;text-align: center;color: darkmagenta;">@i</th>
                                                }

                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr>
                                                <td>
                                                    <table style="background-color:red">
                                                        <tr>
                                                            <td colspan="35">

                                                                <table>

                                                                    <tr>
                                                                        <td rowspan="3" style="padding:0px">Daily</td>
                                                                    </tr>

                                                                </table>

                                                            </td>
                                                            <td>

                                                                <table>

                                                                    <tr>
                                                                        <td rowspan="3" style="padding:0px">temperture check</td>
                                                                    </tr>

                                                                </table>

                                                            </td>
                                                            @*<td style="width:100%;padding:0rem!important;text-align: center;color: darkmagenta;max-width:100%;background-color:yellow">

                                                                <table>

                                                                    <tr>
                                                                        <td rowspan="3">Check the Temperature of instrument</td>
                                                                    </tr>

                                                                </table>

                                                            </td>*@
                                                         
                                            </tr>
                                                        </table>
                                            

                                        </tbody>


                                    </table>
                                </td>
                            </tr>
                        </table>
                     
                        <!--Table-->
                    </div>

                </div>
            </div>
       
    
    </form>
</body>
</html>

    Tuesday, August 20, 2019 7:22 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1520731567 posted

    Hi erum,

    secondly can u help me i need to set td in inner table with red color , td is showing with red color but showing padding from top and bottom i need to set to reomivig padding so that it synhnorize with header

    do you mean you want this effect?

    I find your inner table is red and I just modify margin-left to 0px,like below:

    <html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="print.min.js"></script>
    <link href="print.min.css" rel="stylesheet" />


    <style>
        table {
            table-layout: fixed;
        }

            table tr th {
                font-size: 13px;
                /*padding:0rem;*/
            }

            table tr td {
                font-size: 10px;
                word-wrap: break-word;
                /*padding:0rem;
            margin:0rem;*/
            }

        #printJS-form {
            border-collapse: collapse;
            border-spacing: 0rem;
            width: 100%;
            padding: 0;
            margin: 0;
            /*table-layout: fixed;*/
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>
    <style>
        table tr th {
            font-size: 13px;
            /*padding:0rem;*/
        }

        table tr td {
            font-size: 11px;
            /*padding:0rem;
            margin:0rem;*/
        }

        #printJS-form {
            border-collapse: collapse;
            border-spacing: 0rem;
            width: 100%;
            padding: 0;
            margin: 0;
            /*table-layout: fixed;*/
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>
</head>
<body>
    <form id="form1">


        <div class="row table table-responsive" style="margin-left:0px;">

            <div class="table-responsive" style="width:100%;border-color:red;border:1px solid red">

                <div class="table-responsive" style="width:100%;border:1px solid;">

                    <!--Table-->
                    <table id="printJS-form" class="table table-responsive table-hover table-bordered" style="border-collapse:collapse; border:1px solid  rgb( 229, 231, 233 )">
                        <tr>
                            <td>
                                <table class="table" style="margin-left: 0px;margin-right:-15px;">
                                    <thead>

                                        <tr style="background-color:burlywood;padding:0rem;">

                                            <th style="width:5%;padding:0rem!important;text-align: center;color: darkmagenta;max-width:5%;">Frequency</th>
                                            <th style="max-width:10%;width:10%;padding:0rem!important;text-align: center;color: darkmagenta;">Task Name</th>

                                            <th style="width: 5%;max-width:5%;padding:0rem!important;text-align: center;color: darkmagenta;">Shift</th>
                                            <th style="width: 5%;max-width:5%;padding:0rem!important;text-align: center;color: darkmagenta;">Range</th>


                                            @for (var i = 1; i <= 31; i++)
                                            {


                                            <th style="width:2.5%;max-width:2.5%;padding:0rem!important;text-align: center;color: darkmagenta;">@i</th>
                                            }

                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr>
                                            <td>
                                                <table style="background-color:red">
                                                    <tr>
                                                        <td colspan="35">

                                                            <table>

                                                                <tr>
                                                                    <td rowspan="3" style="padding:0px">Daily</td>
                                                                </tr>

                                                            </table>

                                                        </td>
                                                        <td>

                                                            <table>

                                                                <tr>
                                                                    <td rowspan="3" style="padding:0px">temperture check</td>
                                                                </tr>

                                                            </table>

                                                        </td>
                                                        @*
                                                        <td style="width:100%;padding:0rem!important;text-align: center;color: darkmagenta;max-width:100%;background-color:yellow">

                                                            <table>

                                                                <tr>
                                                                    <td rowspan="3">Check the Temperature of instrument</td>
                                                                </tr>

                                                            </table>

                                                        </td>*@

                                                    </tr>
                                                </table>


                                    </tbody>


                                </table>
                            </td>
                        </tr>
                    </table>

                    <!--Table-->
                </div>

            </div>
        </div>


    </form>
</body>
</html>

    If this is not what you want,please let me know.

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 20, 2019 8:48 AM