CODEWITHSUNDEEP
javascriptjqueryhtmlcssuser-interface
Keerthivasan
Keerthivasan

Reputation: 1661

html table td right allignment for amount columns?

I am using the html table for displaying the records and also i am having amount column in records, so i need to align that particular td in right allignment and all other td in left alignment. My table width=100%, the columns are equally divided. the right alligned values are not straight to the header.

.right-frame-cell-3 {
    height: 270px;
}
.right-frame-cell-3 .tcont {
    height: 226px;
    overflow: auto;
    border-top: 20px solid transparent
}
.right-frame-cell-3 .cell-header {
    background-color: #DDDDDD;
    padding-top: 5px;
    padding-bottom: 5px;
}
table thead th {
    text-align: left;
}
.right-frame-cell-3 table td:nth-child(5) {
    text-align: right;
}
table.table-cell3 thead th {
    background-color: #CCCCCC;
}
table.table-cell3 td {
    text-align: left;
    color: #2196F3;
}
table.table-cell3 thead tr th {
    height: 0;
    line-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
}
table.table-cell3 thead tr th div {
    position: absolute;
    color: black;
    line-height: normal;
    width: 100%;
    z-index: 2;
    text-align: left;
    font-weight: bold;
    background-color: #CCCCCC;
    padding-top: 3px;
    padding-bottom: 3px;
    top: 0;
}
<div class="frame-cell right-frame-cell-3 ui-summ1" >
    <div class="cell-header">
        <span>Time Detail From </span><span class="from_date" style="margin-left:10px;">07-Sep-16</span><span style="margin-left:10px;"> to </span><span class="to_date" style="margin-left:10px;">07-Sep-16</span>
        <span style="margin-left:25%;color:black;font-weight:bold;">TIME</span>
    </div>
    <div class="tcont-wrap" style="overflow:hidden;position:relative;">
        <div class="tcont">
            <table class="table-cell3" width="100%" cellspacing="0" border="1">
                <thead>
                    <tr>
                        <th>
                            Date
                            <div>Date</div>
                        </th>
                        <th>
                            Client Code
                            <div>Client Code</div>
                        </th>
                        <th>
                            Work Description
                            <div>Work Description</div>
                        </th>
                        <th>
                            Location
                            <div>Location</div>
                        </th>
                        <th>
                            Duration
                            <div>Duration</div>
                        </th>
                        <th>
                            Delete
                            <div>Delete</div>
                        </th>
                    </tr>
                </thead>
                <tr>
                    <td>07-Sep-16</td>
                    <td>NXS</td>
                    <td>Reset Password and worked on....</td>
                    <td>O</td>
                    <td>2.5</td>
                    <td>Delete</td>
                </tr>
            </table>
        </div>
    </div>
</div>

Now My Output is

enter image description here

now i want to align the fifth column Duration (td) in right alignment and also straight to the header. that means i specify whitespace to be removed or anything

Anyone please give me the solutions and suggestion ?

Awaiting Response ? Thanks in Advance

Upvotes: 1

Views: 129

Answers (3)

Santosh Khalse
Santosh Khalse

Reputation: 12720

CSS

.right-frame-cell-3 {
    height: 270px;
}
.right-frame-cell-3 .tcont {
    height: 226px;
    overflow: auto;
    border-top: 20px solid transparent
}
.right-frame-cell-3 .cell-header {
    background-color: #DDDDDD;
    padding-top: 5px;
    padding-bottom: 5px;
}
table thead th {
    text-align: left;
}
.right-frame-cell-3 table td:nth-child(5) {
    text-align: right;
}
table.table-cell3 thead th {
    background-color: #CCCCCC;
}
table.table-cell3 td {
    text-align: left;
    color: #2196F3;
}
table.table-cell3 thead tr th {
    height: 0;
    line-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
}
table.table-cell3 thead tr th div {
    position: absolute;
    color: black;
    line-height: normal;
    width: 100%;
    z-index: 2;
    text-align: left;
    font-weight: bold;
    background-color: #CCCCCC;
    padding-top: 3px;
    padding-bottom: 3px;
    top: 0;
}

HTML

<div class="frame-cell right-frame-cell-3 ui-summ1" >
    <div class="cell-header">
        <span>Time Detail From </span><span class="from_date" style="margin-left:10px;">07-Sep-16</span><span style="margin-left:10px;"> to </span><span class="to_date" style="margin-left:10px;">07-Sep-16</span>
        <span style="margin-left:25%;color:black;font-weight:bold;">TIME</span>
    </div>
    <div class="tcont-wrap" style="overflow:hidden;position:relative;">
        <div class="tcont">
            <table class="table-cell3" width="100%" cellspacing="0" border="1">
                <thead>
                    <tr>
                        <th>
                            Date
                            <div>Date</div>
                        </th>
                        <th>
                            Client Code
                            <div>Client Code</div>
                        </th>
                        <th>
                            Work Description
                            <div>Work Description</div>
                        </th>
                        <th>
                            Location
                            <div>Location</div>
                        </th>
                        <th >
                            Duration
                            <div>Duration</div>
                        </th>
                        <th>
                            Delete
                            <div>Delete</div>
                        </th>
                    </tr>
                </thead>
                <tr>
                    <td>07-Sep-16</td>
                    <td>NXS</td>
                    <td>Reset Password and worked on....</td>
                    <td>O</td>
                    <td>2.5</td>
                    <td>Delete</td>
                </tr>
            </table>
        </div>
    </div>
</div>

Upvotes: 1

Gabbax0r
Gabbax0r

Reputation: 1826

the fiddle shows the Duration Div on the right because the text-alignment on the 5th child is right. i dont know why but try to force it:

table.table-cell3 thead tr th div {
    position: absolute;
    color: black;
    line-height: normal;
    width: 100%;
    z-index: 2;
    text-align: left !important;     <----------
    font-weight: bold;
    background-color: #CCCCCC;
    padding-top: 3px;
    padding-bottom: 3px;
    top: 0;
}

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add Width on th for Duration 80px

.right-frame-cell-3 {
    height: 270px;
}
.right-frame-cell-3 .tcont {
    height: 226px;
    overflow: auto;
    border-top: 20px solid transparent
}
.right-frame-cell-3 .cell-header {
    background-color: #DDDDDD;
    padding-top: 5px;
    padding-bottom: 5px;
}
table thead th {
    text-align: left;
}
.right-frame-cell-3 table td:nth-child(5) {
    text-align: right;
}
table.table-cell3 thead th {
    background-color: #CCCCCC;
}
table.table-cell3 td {
    text-align: left;
    color: #2196F3;
}
table.table-cell3 thead tr th {
    height: 0;
    line-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
}
table.table-cell3 thead tr th div {
    position: absolute;
    color: black;
    line-height: normal;
    width: 100%;
    z-index: 2;
    text-align: left;
    font-weight: bold;
    background-color: #CCCCCC;
    padding-top: 3px;
    padding-bottom: 3px;
    top: 0;
}
<div class="frame-cell right-frame-cell-3 ui-summ1" >
    <div class="cell-header">
        <span>Time Detail From </span><span class="from_date" style="margin-left:10px;">07-Sep-16</span><span style="margin-left:10px;"> to </span><span class="to_date" style="margin-left:10px;">07-Sep-16</span>
        <span style="margin-left:25%;color:black;font-weight:bold;">TIME</span>
    </div>
    <div class="tcont-wrap" style="overflow:hidden;position:relative;">
        <div class="tcont">
            <table class="table-cell3" width="100%" cellspacing="0" border="1">
                <thead>
                    <tr>
                        <th>
                            Date
                            <div>Date</div>
                        </th>
                        <th>
                            Client Code
                            <div>Client Code</div>
                        </th>
                        <th>
                            Work Description
                            <div>Work Description</div>
                        </th>
                        <th>
                            Location
                            <div>Location</div>
                        </th>
                        <th width="80">
                            Duration
                            <div>Duration</div>
                        </th>
                        <th>
                            Delete
                            <div>Delete</div>
                        </th>
                    </tr>
                </thead>
                <tr>
                    <td>07-Sep-16</td>
                    <td>NXS</td>
                    <td>Reset Password and worked on....</td>
                    <td>O</td>
                    <td>2.5</td>
                    <td>Delete</td>
                </tr>
            </table>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions