Question

隔离TR的最佳方法是什么？因此“@”和“m”之间存在差距所以显示如下：

@@@@     mmmmm

HTML：

<div id="aero">
<table id="dedicatedserverstable" style='border: 1'>
<tbody>
<tr>@@@@@@@@@@@@@@@@@@@@@@</tr>
<tr>mmmmmmmmmmmmmmmmmmmmmm</tr>
</tbody>
</table>
</div>

CSS：

#aero {
width: 800px;
margin-right: auto;
margin-left: auto;
background:#F2F7FA;
padding: 30px 30px 0px 30px;
min-height: 120px;
font: 12px Arial, Helvetica, sans-serif;
-webkit-box-shadow: 0 0 5px #868686;
box-shadow: 0 0 5px #868686;
color: #666;
border-collapse: collapse;
}

这是代码：

http://jsfiddle.net/TGKa7/2/

Answer 1

首先，您的HTML标记不正确。 <tr>元素唯一可接受的子元素是<td>。这意味着您无法直接在<tr>内嵌入文本。您需要将标记更改为以下内容：

<table id="dedicatedserverstable" style='border: 1'>
  <tbody>
    <tr>
      <td>@@@@@@@@@@@@@@@@@@@@@@</td>
      <td>mmmmmmmmmmmmmmmmmmmmmm</td>
    </tr>
  </tbody>
</table>

然后，您可以使用CSS在两个表格单元格之间应用填充，如下所示：

#dedicatedserverstable td {
  padding-right: 20px;
}

这是一个小提琴：http://jsfiddle.net/e6DFT/

Answer 2

您需要将td放在表格行中，还有一个关闭tr个标签太多

  <tr><td>@@@@@@@@@@@@@@@@@@@@@@</td></tr>
  <tr><td>mmmmmmmmmmmmmmmmmmmmmm</td></tr>

http://jsfiddle.net/5fpVL/

Answer 3

如果你想在同一行上得到结果，你应该真正创建表格分区（），这样“@@@”将与“mmm”分开。像这样：

<div id="aero">
<table id="dedicatedserverstable" style='border: 1'>
    <tbody>
        <tr>
            <td>@@@@@@@@@@@@@@@@@@@@@@</td>
            <td>mmmmmmmmmmmmmmmmmmmmmm</td>
        </tr>
    </tbody>
</table>
</div>

另一方面，如果你想让它分成两行，它应该是这样的：

<div id="aero">
<table id="dedicatedserverstable" style='border: 1'>
    <tbody>
        <tr>
            <td>@@@@@@@@@@@@@@@@@@@@@@</td>
        </tr>
        <tr>
            <td>mmmmmmmmmmmmmmmmmmmmmm</td>
        </tr>
    </tbody>
</table>
</div>

Answer 4

通过间隔不知道你的意思，但也许这会有所帮助：

MARKUP：

<div id="aero">
    <table id="dedicatedserverstable" style='border: 1'>
        <tbody>
            <tr><td class = "first">@@@@@@@@@@@@@@@@@@@@@@</td></tr>
            <tr><td>mmmmmmmmmmmmmmmmmmmmmm</td></tr>
        </tbody>
    </table>
</div>

CSS：

#aero {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    background:#F2F7FA;
    padding: 30px 30px 0px 30px;
    min-height: 120px;
    font: 12px Arial, Helvetica, sans-serif;
    -webkit-box-shadow: 0 0 5px #868686;
    box-shadow: 0 0 5px #868686;
    color: #666;
    border-collapse: collapse;
}
#aero td.first {
  padding-bottom: 20px;
}

http://jsfiddle.net/TGKa7/13/

如果你需要同一行中的差距，请使用：

http://jsfiddle.net/TGKa7/18/

Answer 5

一种方法是定位第一个表格行并将内容与其中的顶部对齐：

<style>
tr:nth-child(1) {height: 50px; vertical-align: top}
</style>
<table>
<tr>
<td>@@@@@</td>
</tr>
<tr>
<td>mmmmmm</td>
</tr>
<table>

enter image description here

如何在表中分隔TR？

5 个答案: