我正在使用 html 表来显示记录,而且我在记录中有金额列,因此我需要将特定的 td 右对齐,所有其他 td 左对齐。我的表格width=100%
,列均分。正确对齐的值不会直接指向标题。
.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>
现在我的输出是
现在我想将第五列 Duration (td) 右对齐并直接对齐标题。这意味着我指定要删除的空格或任何内容
谁能给我解决方案和建议?
等待响应? 提前致谢
最佳答案
在 th
上添加宽度 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>
关于javascript - html 表格 td 金额列的右对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39718121/