如何在一个td中对齐多个文本行

时间:2012-10-15 21:51:53

标签: html alignment html-table

我需要在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”。

有什么想法吗? 此外,如果有更好的方法,我很想知道!

2 个答案:

答案 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>