css 将表格的列左右对齐

2ic8powd 于 2023-03-14 发布在其他

关注(0)|答案(4)|浏览(206)

我在应用程序中使用表格。表格中有两列需要用于“下一页”和“上一页”按钮。我想将它们分别放在右上角和左下角。我该如何做到呢？

<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>

css

来源：https://stackoverflow.com/questions/43719098/align-the-columns-of-table-to-right-and-left

4条答案

按热度按时间

gwbalxhn1#

首先，请修复问题中示例中的HTML错误，然后继续阅读。
您可以在第二个表格单元格上设置text-align: right;。但是建议避免使用table进行布局，下面是使用div和flexbox的示例。

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

td:last-child {
  text-align: right;
}

div {
  display: flex;
  justify-content: space-between;
}

<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>

编辑

请参见下面的示例以创建3列布局。
一个二个一个一个

赞(0）回复(0）举报 2023-03-14

yrwegjxp2#

您的源代码有问题：小于号应该是一个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>

赞(0）回复(0）举报 2023-03-14

nnvyjq4y3#

试试这个：

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>

赞(0）回复(0）举报 2023-03-14

rbpvctlc4#

你可以直接在你的标签中这样做：

<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; }

赞(0）回复(0）举报 2023-03-14

我来回答

css 将表格的列左右对齐

4条答案

CSS

相关问题

热门标签

最新问答