2016-09-27 5 views
1

私はレコードを表示するためにhtmlテーブルを使用していますが、私もレコードの量の列を持っているので、私は右のアライメントとそのすべての他のすべてのTDのアライメントを調整する必要があります。私のテーブルwidth=100%、列は等しく分割されます。右揃えの値はヘッダーに対してまっすぐではありません。html table td金額列の右揃え?

.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>

今、私の出力が

enter image description here

ある今、私は右に整列して第5列期間(TD)を揃え、またストレートヘッダーにしたいと思います。つまり、削除する空白や何かを指定することを意味します。

誰でも私に解決策と提案を教えてください。

応答を待っていますか?アドバンスでおかげ

+0

あなたが提供するスニペットが正常に動作しているようだ:私はなぜ知っているが、それを強制しようといけません。問題はどこですか? –

+0

はい通常のサイズの解像度に問題が発生すると、小さな解像度のサイズで作業します – Keerthivasan

答えて

1

は、第五子上のテキストの位置合わせが右であるため、フィドルが右の期間本部を示しDuration80px

.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>

+0

ありがとう!さまざまな画面サイズで動作していますか? – Keerthivasan

+0

はいすべての画面サイズを使用 –

+0

すべてのコードが生成されますか? ""ハードコード値ではありませんか? hard coding that style = "width:80px" – Keerthivasan

0

ためthに幅を追加します。

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; 
} 
1

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> 
+0

しかし、私は左揃えでその列の見出しを必要とする – Keerthivasan

+0

確かに、私は上記のコードを編集してください –

+0

よくチェックされて、その作業していません – Keerthivasan