如何在 <td> 中制作 2 行答案

【问题标题】：How make 2 lines in <td>如何在 <td> 中制作 2 行
【发布时间】：2011-04-09 10:11:58
【问题描述】：

我想在<td> 中显示两行。它正在显示，彼此相邻。

 <td bgcolor="White">
   First Name
   (on external website)
 </td>

我想像下面这样。第一行粗体，第二行小写。

【问题讨论】：

标签： asp.net html css

【解决方案1】：

您可以添加   来强制换行并为字体样式定义一些 CSS 类：

<style>
.name { font-weight: bold; }
.subtext { font-size: smaller; }
</style>

<td bgcolor="White" >
<span class="name">First Name</span>  <br/>
<span class="subtext">(on external website)</span>
</td>

更新：为了完整起见，我还包括其他人的建议：不要使用   元素，而是通过 CSS 控制换行符。这样做的好处是，您可以通过简单地编辑 CSS 来更改行为（删除换行符）：

<style>
.name { font-weight: bold; display:block; }
.subtext { font-size: smaller; }
</style>

<td bgcolor="White" >
<span class="name">First Name</span>
<span class="subtext">(on external website)</span>
</td>

除了使用span 元素，您还可以使用divs，它默认有换行符（但可以通过在CSS 中设置display:inline 来禁用它）。

【讨论】：

如果你关心未来的 CSS 样式变化，那么避免使用“
”标签，并像这样使用 CSS：span.name { display: block; }

【解决方案2】：

最简单的解决方案是添加  @M4N 在他的回答中写道。但既然“名字”似乎是某种标题，我建议使用适当的 HTML 标记。还可以使用 CSS 来设置表格样式：

HTML：

<td class="white">
    <h3>First Name</h3>
    <span class="small">(on external website)</span>
</td>

CSS：

.white {
    background-color: white;
}
.small {
    font-size: .8em;
}

注意：因为<h3>是块级元素，所以自动“插入”换行符

【讨论】：

【解决方案3】：

由于您想对线条进行不同的样式设置，因此无论如何都需要将它们放在单独的元素中，因此如果您使用块元素，它们最终会成为单独的线条：

<td style="background: white;" >
  <div style="font-weight: bold;">First Name</div>
  <div style="font-size: 70%;">(on external website)</div>                                 
</td>

【讨论】：

+1 如果需要，这种安排还允许 CSS 样式删除行分隔。任何带有“
”的解决方案都会阻止 CSS 进行更改。

【解决方案4】：

<td bgcolor="White" >
    <span style="font-weight:bold;">First Name</span>  <br/>
    <span style="font-size:6px;">(on external website)</span>
</td>

我想是这样的

【讨论】：

你可以设置 display:block;将它们放在单独的行上，而不是

【解决方案5】：

使用 与块属性或

【讨论】：

【解决方案6】：

你可以放一个 p 标签来表示这样的换行符。

<td> 
    First Name   
   <p>(on external website)</p>
</td>

或者像这样使用 br 标签：

<td> 
    First Name <br />
    (on external website)
</td>

【讨论】：

【解决方案7】：

<td bgcolor="White" >
    <strong>First Name</strong><br />
   <small>(on external website)</small>
  </td>

【讨论】：