2016-09-27 62 views
1

我正在使用html表來顯示記錄,並且我有記錄中的數量列,所以我需要對齊特定的td在右對齊和所有其他td左對齊。我的表格width=100%,列被平分。正確的已分配值不直接標題。html表格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

現在我想對齊右對齊列第五位持續時間(TD),也直接到頭部。這意味着我指定要刪除的空白或任何東西

任何人請給我的解決方案和建議?

等待響應? 由於提前

+0

似乎被你工作正常提供的片段。問題在哪裏? –

+0

是的,它的工作小分辨率尺寸時,它的正常大小分辨率問題發生 – Keerthivasan

回答

1

th添加寬度爲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

我的所有代碼是否生成? 「」中的硬代碼值不是可能的嗎?與硬編碼這種風格=「寬度:80px」 – Keerthivasan

0

小提琴顯示在右邊的持續事業部,因爲在第5子文本對齊方式是正確的。我不知道爲什麼,但試圖迫使它:

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