Question

我尝试过搜索，但我不知道该怎么称呼它。我试图在这张照片中完成看起来像左侧的东西：

但是，当我更改页面的宽度时，它会折叠并导致不必要的行为。

我使用margin-left: 50px; float:left作为插入符号，使用margin-right: 50px作为文本。

http://embed.plnkr.co/v68tw85oYqEeBmfCreD5/preview

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <table class="table table-bordered text-center">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td><i class="fa fa-caret-up" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">2332</span></td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td style="width: 300px"><i class="fa fa-caret-down" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">1.2</span></td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td><i class="fa fa-caret-down" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">1.2</span></td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

＆＃13;

如果没有折叠，有没有更好的方法呢？

Answer 1

请尝试以下操作：http://jsfiddle.net/jLod5cv9/。单元格的每个元素都设置为inline-block，white-space: nowrap声明应将这些元素保持在一起。

HTML：

<table>
    <tr><td class = "up" data-number = "3"></td></tr>
    <tr><td class = "down" data-number = "-55"></td></tr>
    <tr><td class = "down" data-number = "-44"></td></tr>
    <tr><td class = "up" data-number = "1"></td></tr>
    <tr><td class = "up" data-number = "65"></td></tr>
</table>

CSS：

table {
    border-collapse: collapse;
}

table td {
    white-space: nowrap;
    border: 1px solid #ccc;
    padding: 5px 10px;
    color: green;
}

table td.down {
    color: red;
}

table td:after {
    content: attr(data-number);
    display: inline-block;
    font: normal 12px/1 Sans-Serif;
    width: 25px;
    text-align: center;
}

table td:before {
    content: "";
    display: inline-block;
    border-style: solid;
    border-width: 0px 4px 5px 4px;
    border-color: transparent transparent green transparent;
    margin-right: 15px;
}

table td.down:before {
    border-width: 5px 4px 0 4px;
    border-color: red transparent transparent transparent;
}

Answer 2

使用保证金时，您告诉页面在那里有一个定义的保证金。如果没有足够的空间来显示所有部分，那么会插入一个换行符，这会导致您的奇怪视图。也许this可以帮到你。

Answer 3

我找不到一种方法将它完全放在中间，主要是因为你的数字总会改变。有时你会有4，有时2，所以完全按照你提供的方式获得它不会发生。但是，如果您使用相同的数字（例如2），那么我在此处发布的方式将有效http://plnkr.co/edit/vQeSURKTVyoeaj6MqsxX?p=preview。我在html中取出你的硬编码并直接用css。

css:
/* Styles go here */
tbody tr td { width: 33%;}
tbody tr td:nth-child(4) { width:33%;}
tbody tr td i { width:50%; text-align:right; margin-right:10px;}
tbody tr td span { width:50%; text-align:left;}

html:

<body>
<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Money</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><i class="fa fa-caret-up" ></i><span>2332</span></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><i class="fa fa-caret-down"></i><span>1.2</span></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><i class="fa fa-caret-down"></i><span>1.2</span></td>
    </tr>
  </tbody>
</table>

如果您想要更改某些td容器（如颜色或宽度），则可以使用nth-child。

Answer 4

布局问题是由于您的浮动元素（插入符号）。如果您的页面宽度缩小，那么HTML表格的列也会缩小，并且可能导致您的元素换行到两行。

我要做的是将插入符号和数字包装在div（HTML表格）中，然后将插入符号和数字放在单独的范围内（HTML表格单元格）。结果是插入符号和数字将始终在一行上，并且您可以控制垂直对齐和间距（使用填充）。

＆＃13;

.tablecell {
  border: 1px dotted blue;
  display: table-cell;
}
.table {
  display: table;
  width: 100px; /* optional */
}
.table span {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  width: 50%;
}
.table span.left {
  text-align: right;
  padding-right: 5px;
}
.table span.right {
  text-align: left;
  padding-left: 5px;
}

＆＃13;

<div class="tablecell">
  <div class="inner table">
    <span class="left">x</span> 
    <span class="right">21</span>
  </div>
</div>

＆＃13;

正确对齐表格单元格中元素之间的间距

4 个答案: