Question

我在我的应用中使用该表。我在表格中有2列，我需要用于下一个和上一个按钮。我想让他们保持在右上角和左下角，我该怎么做？

<table>
  <tr>
    <td colspan="2">
      <a href="#Previous" style="float:left;color:#fff">
        < Back </a>
          <img src="images/icon-previous.png" />
    </td>
    <td style="float:right;margin-left: 208px;">
      <a data-bind="click:$root.Next" style="float:right">
        <img src="images/icon-next.png" />
      </a>
    </td>
  </tr>
</table>

我更新了我的代码，有三个图片，我需要使用表格将它们对齐为左，中，右订单，是否可能？

<footer data-role="footer">
  <div style="width:100%">
    <table style="width:100%">
      <tr>
        <td style="text-align:left">
          <img src="images/icon-add1.png" /></a>
  </div>
  </div>
  </td>

  <td style="text-align:center">
    <a><img src="images/icon-add2.png" /></a>
  </td>
  <td style="text-align:right">
    <img src="images/icon-add3.png" /></a>
    </a>
  </td>
  </tr>
  </table>
  </div>
</footer>

Answer 1

首先，请在问题的示例中修复HTML错误，然后继续阅读。

您可以在第二个表格单元格上设置text-align: right;。但是，建议避免使用表格进行布局，这是在下面使用带有flexbox的div的示例。

＆＃13;

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

td:last-child {
  text-align: right;
}

div {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<table>
  <tr>
    <td><a>&lt; Back</a></td>
    <td><a>Next &gt;</a></td>
  </tr>
</table>

<hr>

<div>
  <a>&lt; Back</a>
  <a>Next &gt;</a>
</div>

＆＃13;

修改

请参阅以下示例以制作3列布局。

＆＃13;
＆＃13;
table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; /* NEW */ } td:nth-child(2) { text-align: center; /* NEW */ } td:nth-child(3) { text-align: right; } div { display: flex; justify-content: space-between; }
＆＃13;
<table> <tr> <td><a>< Back</a></td> <td><a>Middle</a></td> <td><a>Next ></a></td> </tr> </table> <hr> <div> <a>< Back</a> <a>Middle</a> <a>Next ></a> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以直接在您的代码中执行

<td align="right">

或者您也可以尝试使用css

  <table>
  <tr>
    <th><a href="#">Item 1</a></th>
    <th><a href="#">Item 2</a></th>
    <th><a href="#">Item 3</a></th>
    <th class="right"><a href="#">Item 4</a></th>
  </tr>
</table>

CSS

    table { width: 100%; }
th { float: left; }
th.right { float: right; }

Answer 3

试试这个：

table {

      border:1px solid #000;
	  width: 100%;
}

img {
     width: 20px;
     vertical-align: middle;
}

.left {
	float: left;
}

.right {
	float: right;
}

a {
       text-decoration: none;
}

<table>
  <tr>
   <td class="pre">
  <a href="#" class="left"> Previous
	  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT6zvVdVIJsJrw6WZFUCNqDAuIG_DTGToOuBiqXEK3bwDEnYEqPwEraqpNd" />
 </a>
   </td>
   <td>
  <a href="#"  class="right">
	<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWdR49Yc8BQgJ5Wx2re6xg43bccDAwWpVdJxSf_8-9WAlIM577tjup6kzU" /> Next
  </a>
  </td>
 </tr>
</table>

Answer 4

您的源代码存在问题：小于标记应该是HTML实体。此外，您最好将按钮放在TH元素中，这样CSS不会影响其他具有TD元素的行。看看这个例子：

<html>
<head>
<style type="text/css">
th {
border:1px solid black;
width:500px;
}
th:nth-child(1)
{
text-align:left;
}
th:nth-child(2)
{
text-align:right;
}
</style>
</head>
<body>
<table>
<tr>
<th>
<a href="#Previous"> &lt; Back </a>
<img src="images/icon-previous.png" />
</th>
<th>
<img src="images/icon-next.png" />
<a href="#next">  Next &gt;</a>
</th>
</tr>
</table>
</body>
</html>

将表格的列左右对齐

4 个答案: