我需要在TD中有一些元素,并且这个td大小最多是表格的50%,并且每行应该对齐到左边,但是最大的文本应该“触摸”右边的表
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="line-height: 20px; width: 49%;">
<span style=" color: #FF00FF !important; font-size: 12pt; font-weight: bold;">Text First Cell
</span>
</td>
<td style="width: 50%; text-align: right;">
<span name="span1" style="float: left; width: 100%;">
<span style="font-family: Arial !important; color: #FF00FF ; font-size: 12pt; font-weight: bold;">Text1 Second Cell Larger Text </span>
</span>
<span name="span2" style="width: 100%; float: left;">
<span style="font-family: Arial ; color: #FF00FF ; font-size: 12pt; font-weight: bold;"> Text2 Second Cell
</span>
</span>
</td>
</tr>
</tbody>
</table>
我几乎可以这样做,但是我无法在左侧对齐文本“Text1 Second Cell Larger Text”和“Text2 Second Cell”。
有什么想法吗? 此外,如果有更好的方法,我很想知道!
答案 0 :(得分:2)
我刚刚学会了如何做到这一点:
.myDiv {
float: right;
}
.span1{
display: block;
}
<div class="myDiv">
<span name="span1" class="span1" >
<span style="font-family: Arial !important; color: #FF00FF ; font-size: 12pt; font-weight: bold;">Text1 Second Cell Larger Text </span>
</span>
<span name="span2" class="span2">
<span style="font-family: Arial ; color: #FF00FF ; font-size: 12pt; font-weight: bold;"> Text2 Second Cell</span>
</span>
</div>
干杯
答案 1 :(得分:0)
我猜你在调整文本方面遇到了问题,因为在同一个单元格中。我建议的是在表格中创建多个单元格,以便更容易。
<table border=0 width=546 style='table-layout:fixed'>
<col width=67>
<col width=75>
<col width=41>
<tr>
<td width="147" rowspan="2"><span style="line-height: 20px; width: 49%;">
<span style=" color: #FF00FF !important; font-size: 12pt; font-weight:bold;">
Text First Cell </span> </span></td>
<td width="389"><div align="right">
<span style="font-family: Arial !important; color: #FF00FF ;
font-size: 12pt; font-weight: bold;">
Text1 Second Cell Larger Text </span></div></td>
</tr>
<tr>
<td><span style="font-family: Arial ; color: #FF00FF ;
font-size: 12pt; font-weight: bold;">
Text2 Second Cell </span></td>
</tr>
</table>