如何使用css在html表格中左右移动项目？ -答案

【问题标题】：How to move items left and right in an html table using css? -如何使用css在html表格中左右移动项目？ -
【发布时间】：2013-12-24 09:45:54
【问题描述】：

我的<tr>s 中有 6 个<td>s，我希望每行中的最后 3 个都靠得更近。我该如何移动它们？

这是我的html：

<p> Test.com Funtown <div><a href="#">Click Here</a></div> </p>
  <table>
    <tbody>
      <tr>
        <td class="statusRunning">R</td>
        <td>My First Try</td>
        <td>100 / 250 plays</td>
        <td><a href="#">Players</a></td>
        <td><a href="#">Duplicate</a></td>
        <td><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td class="statusQueued">1</td>
        <td>The best try</td>
        <td>0 / 250 plays</td>
        <td><a href="#">Players</a></td>
        <td><a href="#">Duplicate</a></td>
        <td><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td class="statusIncomplete"> </td>
        <td>Could be better</td>
        <td>0 / 50 plays</td>
        <td><a href="#">Players</a></td>
        <td><a href="#">Duplicate</a></td>
        <td><a href="#">Archive</a></td>
      </tr>
    </tbody>
  </table>

这是我的 CSS：

p {
}
div a { 
}
table {
  padding: 0;
  margin: 10;
  border-left: none;
  border-right: none;
  text-align:right;      
  border-collapse:separate;
  border-spacing: 0 2px;
}

table tr       {background:#fff;}
table tr:hover {background:#EBF7FC;}

table tr       td             {padding:6px 8px;}
table tr       td:first-child {border-left: 3px solid #fff;}
table tr       td:last-child  {border-right:3px solid #fff;} 
table tr:hover td:first-child {border-left: 3px solid #4EB2E2;}
table tr:hover td:last-child  {border-right:3px solid #4EB2E2;}

table tr td:nth-child(1){
  color:#fff;
  width: 33px;
  padding: 5px 0;
  text-align: center;
}
.statusRunning {
   background-color: #5AD427;
}
.statusQueued {
   background-color: #A4E786;
}
.statusIncomplete {
   background-color: #FFCC00;
}
table tr td:nth-child(2){
  text-align:left;
}

【问题讨论】：

您的表中有 18 个元素，每行有 6 个。当你说你想要最后 3 个“靠近在一起”时，你是什么意思？

标签： html css html-table alignment

【解决方案1】：

我会将它们全部放入同一个 <td> 并在 <a> 元素中添加边距/填充 <td> 然后您可以在其中添加任何数量的链接。

下面是一个小提琴。 http://jsfiddle.net/D7sTY/

HTML

  <tr>
    <td class="statusRunning">R</td>
    <td>My First Try</td>
    <td>100 / 250 plays</td>
    <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
  </tr>

CSS

.tightcell a
{
    margin: 0 2px;    
}

【讨论】：

【解决方案2】：

使用 CSS 单独定位它们并删除/减少填充。

table tr td:nth-child(4), table tr td:nth-child(5), table tr td:nth-child(6){  
    padding:0;
}

http://jsfiddle.net/G4Dw5/2/

我完全移除了它们的填充，不过您可能需要添加一些像素。

【讨论】：

【解决方案3】：

nth-child(n+4) 像这样（fiddle）：

td:nth-child(n+4){
    padding: 0;   
}

这是一个预览：

【讨论】：

感谢您的帮助，但奇怪的是，当我将相同的代码放入其中时，它对我的表没有任何影响...是否与我在 Zurb Foundation 5 中使用 SASS 的事实有关？否则我不知道该怎么做才能解决它......

【解决方案4】：

将 HTML 控件的 id 属性设置为 .css 文件中包含的 css 类并在您的 .css 文件中添加以下代码

<HTMLControl id="id">

#id{
margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
enter code here}

【讨论】：