CODEWITHSUNDEEP
htmlcssangular
Amal
Amal

Reputation: 305

Not able to properly align table in Angular 2 - unwanted white space to the right

I am making a table in Angular 2. I have 4 columns, but after the last column unwanted white space to the right. I am using bootstrap as well.

The below given is the HTML class

    <div class="panel panel-default">
        <div class="panel-heading">User information</div>
        <div class = 'data-table'>
        <table style="width:60px" class="text-center" header-class="'text-center'" class="table table-bordered"  [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
            <thead>
            <tr>
                <th style="width: 10%"></th>
                <th style="width: 10%">
                    <mfDefaultSorter by="name">Name</mfDefaultSorter>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="email">Email</mfDefaultSorter>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="age">Age</mfDefaultSorter>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="city">City</mfDefaultSorter>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of mf.data">
                <td>
                  <button class="btn btn-danger" title="remove">
                    <span class="glyphicon glyphicon-remove"></span>
                  </button>
                </td>
                <td>"AJ"</td>
                <td>"AJ"</td>
                <td class="text-right">"AJ"</td>
                <td>"AJ"</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="3">
                    <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
                </td>
            </tr>
            </tfoot>
        </table>
        </div>
    </div>

Please see the screenshot of the page: The Screenshot of the page

As denoted in the screenshot, I have marked in yellow the white space to the right and a small column like space at the bottom. how to remove those to get a proper table?

Upvotes: 0

Views: 876

Answers (1)

Zowie van Geest
Zowie van Geest

Reputation: 169

You are using 60px width and 10% on each <th> try to change this to 100% width and 20% on each cell.

<div class="panel panel-default">
    <div class="panel-heading">User information</div>
    <div class = 'data-table'>
        <table style="width:100%" class="text-center" header-class="'text-center'" class="table table-bordered"  [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
            <thead>
                <tr>
                    <th style="width: 20%"></th>
                    <th style="width: 20%">
                        <mfDefaultSorter by="name">Name</mfDefaultSorter>
                    </th>
                    <th style="width: 20%">
                        <mfDefaultSorter by="email">Email</mfDefaultSorter>
                    </th>
                    <th style="width: 20%">
                        <mfDefaultSorter by="age">Age</mfDefaultSorter>
                    </th>
                    <th style="width: 20%">
                        <mfDefaultSorter by="city">City</mfDefaultSorter>
                    </th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="3">
                        <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
                    </td>
                </tr>
            </tfoot>
            <tbody>
                <tr *ngFor="let item of mf.data">
                    <td>
                        <button class="btn btn-danger" title="remove">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </td>
                    <td>"AJ"</td>
                    <td>"AJ"</td>
                    <td class="text-right">"AJ"</td>
                    <td>"AJ"</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Upvotes: 1

Related Questions