如何最好地拆分表格元素<td>？我不想使用嵌套表格。我需要内部元素具有两个元素，一个左对齐，另一个右对齐且没有边框。
例如：
<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>
除以下方法外，还有其他的做法吗？
<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>
我希望内部元素可以是
<span>或者适用于此的其他标签。将<td>表格元素分割为左对齐和右对齐
3
我希望内部元素可以是
- Asher
3
5个回答
6
<table>
<tr>
<td>
<div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
</td>
</tr>
</table>
- operation1053
2
这不是一个好的做法。人们不应该将样式数据嵌入到HTML中；这在现在已经被淘汰了。 - Jeremy Holovacs
在处理电子邮件时，嵌入样式仍然是必要的，因为大多数客户端会剥离
<head>和<style>标签。 - Josue Alexander Ibarra2
我会这样做：
然后我的 CSS 就会像这样：
我会这样做：
<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;}
...或者类似的东西。
（这句话没有上下文，无法完整翻译。）- Jeremy Holovacs
3
最好使用<span>，我不想要任何换行符。 - Asher
换行符对于div来说并不是固有的，特别是当你使用绝对定位时。你不应该遇到任何问题。 - Jeremy Holovacs
这对我有用，但我发现我必须在
.left和.right中都加上top:0，否则垂直位置会偏移。 - TripeHound1
你可以这样做，虽然在我看来，使用span和div更好。
<table width="100%">
<tr width="100%">
<td width="100%">
<span style="float:left;">left</span>
<span style="float:right;">right</span>
</td>
</tr>
</table>
- Travis J
1
浮动看起来不太对，所以我使用了flexbox：
https://jsfiddle.net/6rc8w709/
.td-content{
display:flex;
}
.child{
flex:1;
}
.right{
text-align:right;
}
HTML：
<table>
<tr>
<td>
<div class="td-content">
<div class="child">
LEFT
</div>
<div class="child right">
RIGHT
</div>
</div>
</td>
</tr>
</table>
- user3413723
0
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>
- Benjamin Pajk
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
span或两个div吗？ - Michael Durrant