Question

分割表格元素<td>的最佳方法是什么？我真的不想使用嵌套表。我需要内部元素有两个元素，一个是左对齐的，另一个是右对齐的，没有边框。

例如：

<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>

除了以下内容之外还有其他任何方法吗？

<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>

我希望内部元素为<span>或其他最适合的内容。

Answer 1

<table>
   <tr>
      <td>
         <div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
      </td>
   </tr>
</table>

Answer 2

我会做类似的事情：

<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>

然后我的css会像：

td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}

......或类似的东西。

Answer 3

你可以这样做，虽然spans和divs要好得多。

<table width="100%">
 <tr width="100%">
  <td width="100%">
   <span style="float:left;">left</span>
   <span style="float:right;">right</span>
  </td>
 </tr>
</table>

Answer 4

漂浮物似乎看起来不对，所以我使用了flexbox：

https://jsfiddle.net/6rc8w709/

<div class="tbl-content">
 <table cellpadding="0" cellspacing="0" border="0">
  <tbody>
   <tr><td>myName</td><td>myStorage</td></tr>
   <tr><td>myName2</td><td>myStorage2</td></tr>
  </tbody>
 </table>
</div>

HTML：

.td-content{
  display:flex;
}
.child{
  flex:1;
}
.right{
  text-align:right;
}

Answer 5

Flexbox是正确的方法，因为所有主要浏览器现在都支持它。如果您需要使用较旧的浏览器，或者您不喜欢浮动广告的缺点，则可以使用这种方法。通过这种方法，您可以更好地控制左右段的溢出，并且如果需要可以轻松添加居中段。

CSS：

table{
  width: 100%;
}

.container{
  width: 100%;
  display: table;
}

.cell{
  display: table-cell;
}

.cell .left{
  text-align: left;
}

.cell.right{
  text-align: right;
}

HTML：

<table>
  <tr>
    <td>
      <div class="container">
        <span class="cell left">LEFT</span>
        <span class="cell right">RIGHT</span>
      </div>
    </td>
  </tr>
</table>

将表格元素拆分为LEFT，右对齐

5 个答案: