Javascript html表格td金额列的右对齐?
我使用html表来显示记录,而且我在记录中有amount列,所以我需要右对齐该特定td,左对齐所有其他td。我的表格Javascript html表格td金额列的右对齐?,javascript,jquery,html,css,user-interface,Javascript,Jquery,Html,Css,User Interface,我使用html表来显示记录,而且我在记录中有amount列,所以我需要右对齐该特定td,左对齐所有其他td。我的表格width=100%,列被等分。右对齐的值不直接指向标题 .right-frame-cell-3{ 高度:270px; } .right-frame-cell-3.tcont{ 高度:226px; 溢出:自动; 边框顶部:20px实心透明 } .右框-单元格-3.单元格标题{ 背景色:#DDDDDD; 垫面:5px; 垫底:5px; } 表thead th{ 文本对齐:左对齐;
width=100%
,列被等分。右对齐的值不直接指向标题
.right-frame-cell-3{
高度:270px;
}
.right-frame-cell-3.tcont{
高度:226px;
溢出:自动;
边框顶部:20px实心透明
}
.右框-单元格-3.单元格标题{
背景色:#DDDDDD;
垫面:5px;
垫底:5px;
}
表thead th{
文本对齐:左对齐;
}
.right-frame-cell-3表td:n子项(5){
文本对齐:右对齐;
}
表3第四单元表{
背景色:#中交;
}
table.table-cell3 td{
文本对齐:左对齐;
颜色:#2196F3;
}
表3.1-3单元图{
身高:0;
线高:0;
保证金:0;
填充顶部:0;
填充底部:0;
颜色:透明;
边界:无;
空白:nowrap;
}
表2.3-3单元的第四分区{
位置:绝对位置;
颜色:黑色;
线高:正常;
宽度:100%;
z指数:2;
文本对齐:左对齐;
字体大小:粗体;
背景色:#中交;
垫面:3件;
垫底:3件;
排名:0;
}
2016年9月7日至2016年9月7日的时间详情
时间
日期
日期
客户端代码
客户端代码
作品描述
作品描述
位置
位置
期间
期间
删除
删除
2016年9月7日
NXS
重置密码并继续。。。。
O
2.5
删除
在th
上为持续时间添加宽度
80px
.right-frame-cell-3{
高度:270px;
}
.right-frame-cell-3.tcont{
高度:226px;
溢出:自动;
边框顶部:20px实心透明
}
.右框-单元格-3.单元格标题{
背景色:#DDDDDD;
垫面:5px;
垫底:5px;
}
表thead th{
文本对齐:左对齐;
}
.right-frame-cell-3表td:n子项(5){
文本对齐:右对齐;
}
表3第四单元表{
背景色:#中交;
}
table.table-cell3 td{
文本对齐:左对齐;
颜色:#2196F3;
}
表3.1-3单元图{
身高:0;
线高:0;
保证金:0;
填充顶部:0;
填充底部:0;
颜色:透明;
边界:无;
空白:nowrap;
}
表2.3-3单元的第四分区{
位置:绝对位置;
颜色:黑色;
线高:正常;
宽度:100%;
z指数:2;
文本对齐:左对齐;
字体大小:粗体;
背景色:#中交;
垫面:3件;
垫底:3件;
排名:0;
}
2016年9月7日至2016年9月7日的时间详情
时间
日期
日期
客户端代码
客户端代码
作品描述
作品描述
位置
位置
期间
期间
删除
删除
2016年9月7日
NXS
重置密码并继续。。。。
O
2.5
删除
小提琴在右边显示Duration Div,因为第五个子项上的文本对齐是正确的。我不知道为什么,但试着强迫它:
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;
}
table.table-cell3 thead tr th div{
位置:绝对位置;
颜色:黑色;
线高:正常;
宽度:100%;
z指数:2;
文本对齐:左!重要;CSS
HTML
2016年9月7日至2016年9月7日的时间详情
时间
日期
日期
客户端代码
客户端代码
作品描述
作品描述
位置
位置
期间
期间
删除
.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>