Hi friendsi need to add more than 7 columns but possible to add only 4 columnsif i am adding more than 4 columns table gets collapsedplease helpltDOCTYPE htmlgtlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt ltlink href34httpscdnjscloudflarecomajaxlibstwitterbootstrap431cssbootstrapmincss34 rel34stylesheet34 gt lttitlegtlttitlegt ltstylegt tablefixed tbody height 200px overf

Hi sureshMGRRefer below sampleHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltstyle type34textcss34gt tr boxshadow 0 8px 16px rgba00015 important ltstylegt ltlink rel34stylesheet34 type34textcss34 href34httpsstackpathbootstrapcdncombootstrap421cssbootstrapmincss34gt ltlink rel34stylesheet34 type34textcss34 href34httpscdnjscloudflarecomajaxlibsfontawesome470cssfontawesomecss34gtltheadgtltbodygt ltdiv class34container34gt ltdiv class34row34gt lttable class34table34gt lttheadgt lttrgt ltth scope34col34gtFirstltthgt ltth scope34col34gtLastltthgt ltth scope34col34

[Solved] Adding columns to HTML Table get collapsed with Bootstrap class

sureshMG...

SOLVED CLOSED ACTIVE ANSWERED
User: sureshMGR
Posted: on Sep 24, 2019 12:19 AM
Forum: HTML and CSS
Answer: 1
Views: 2554
Sample Code: Download

Hi friends,

i need to add more than 7 columns but possible to add only 4 columns.

if i am adding more than 4 columns table gets collapsed.

please help.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <title></title>
    <style>
        .table-fixed tbody {
            height: 200px;
            overflow-y: auto;
            width: 100%;
        }

        .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
            display: block;
        }

            .table-fixed tbody td, .table-fixed tbody th, .table-fixed thead > tr > th {
                float: left;
                position: relative;
            }

                .table-fixed tbody td::after, .table-fixed tbody th::after, .table-fixed thead > tr > th::after {
                    content: '';
                    clear: both;
                    display: block;
                }
    </style>
</head>
<body> 
    <div class="container py-5">
        <div class="row">
            <div class="col-lg-7 mx-auto bg-white rounded shadow">
                <!-- Fixed header table-->
                <div class="table-responsive">
                    <table class="table table-fixed">
                        <thead>
                            <tr>
                                <th class="col-3">First</th>
                                <th class="col-3">Last</th>
                                <th class="col-3">designation</th>
                                <th class="col-3">salary</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
       
                                <td class="col-3">Mark</td>
                                <td class="col-3">Otto</td>
                                <td class="col-3">engineer</td>
                                <td class="col-3">10000</td>
                            </tr>
                            <tr>                     
                                <td class="col-3">Jacob</td>
                                <td class="col-3">Thornton</td>
                                <td class="col-3">doctor</td>
                                <td class="col-3">15000</td>
                            </tr>
                            <tr>                 
                                <td class="col-3">Larry the Bird</td>
                                <td class="col-3">India</td>
                                <td class="col-3">.net developer</td>
                                <td class="col-3">1000000</td>
                            </tr>
                            <tr>
                                <td class="col-3">Jacob</td>
                                <td class="col-3">Thornton</td>
                                <td class="col-3">doctor</td>
                                <td class="col-3">15000</td>
                            </tr>
                            <tr>
                                <td class="col-3">Jacob</td>
                                <td class="col-3">Thornton</td>
                                <td class="col-3">doctor</td>
                                <td class="col-3">15000</td>
                            </tr>
                        </tbody>                     
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

pandeyis...

0 2

Reply
ANSWER
User: pandeyism
Replied: on Sep 24, 2019 05:46 AM
Report

Hi sureshMGR,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        tr
        {
            box-shadow: 0 8px 16px rgba(0,0,0,.15) !important;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body> 
    <div class="container">
        <div class="row">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">First</th>
                        <th scope="col">Last</th>
                        <th scope="col">designation</th>
                        <th scope="col">salary</th>
                        <th scope="col">City</th>
                        <th scope="col">Country</th>
                        <th scope="col">Id</th>
                        <th scope="col">Postal Code</th>
                        <th scope="col">Mobile</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>engineer</td>
                        <td>10000</td>
                        <td>Mumbai</td>
                        <td>India</td>
                        <td>1</td>
                        <td>654</td>
                        <td>65656565465</td>
                    </tr>
                    <tr>
                        <td>Test</td>
                        <td>Mathew</td>
                        <td>.Net Developer</td>
                        <td>1000000</td>
                        <td>Banglore</td>
                        <td>India</td>
                        <td>2</td>
                        <td>6565</td>
                        <td>6546565466</td>
                    </tr>
                    <tr>
                        <td>Mudassar</td>
                        <td>Khan</td>
                        <td>architect</td>
                        <td>15268962</td>
                        <td>jaisalmer</td>
                        <td>India</td>
                        <td>3</td>
                        <td>654165</td>
                        <td>65465465498465</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

[Solved] Adding columns to HTML Table get collapsed with Bootstrap class

Company

Explore

Follow us

Contact Us