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

【问题标题】：How to align multiple text lines in one td如何在一个 td 中对齐多个文本行
【发布时间】：2012-10-05 22:57:22
【问题描述】：

我需要在一个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”左对齐。

有什么想法吗？另外，如果有更好的方法，我很想知道！

【问题讨论】：

嗨，我真的不明白你的问题。您是希望将“Text1 Second Cell Larger Text”和“Text2 Second Cell”对齐到表格单元格的左侧，还是要对齐“最大的文本应该“触摸”表格的右侧”
对不起，我不清楚.. 我的意思是在左侧对齐“Text1 Second Cell Larger Text”和“Text2 Second Cell”。但也有“Text1 Second Cell Larger Text”“触摸”表格的右侧。

标签： html alignment html-table

【解决方案1】：

我猜您在对齐文本时遇到问题，因为在同一个单元格中。我建议在表格中创建多个单元格，这样会更容易。

示例：

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

【讨论】：

感谢您的建议。这实际上对我没有帮助，因为由于其他原因，我需要“Text1 Second Cell Larger Text”和“Text2 Second Cell”在同一个单元格中。也许我可以把它们放在另一张桌子上，但我认为这不是最好的解决方案......

【解决方案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>

干杯

【讨论】：