Question

我需要一个跨越表格整个长度的按钮，该按钮将执行调用以获取下一个数据集的功能，以避免用户手动选择它。

不幸的是我的css不是很好。有帮助吗？谢谢！

对于我想要的东西存在一些困惑，让我试着画出它。

| table |b|
|       |u|
|       |t|
|_______|n|

我无法给你标记，因为它在起作用。此外，它的模仿程度很高，因此无济于事。

Answer 1

<table>
  <tr>
    <td>alpha</td>
    <td>beta</td>
  </tr>
  <tr>
    <td colspan="2"><button style="width:100%">c</button></td>
  </tr>
</table>

您尝试布置的内容以及您尝试过的内容的一些示例将非常有用。重要的是colspan将许多列变为1。

Answer 2

好的，这个问题有点棘手。

<div style="position: relative;">
  <table style="">
    <tr>
      <td>asdasdasdssssssss sssssssssssss sssssssssss sssssssss sssssssssssssss sssssssss</td>
      <td>betasssssssssssssssssssssssssssss ssssssssssssssssssssssssssss ssssssssssssssss sssssssssss sssssss sssssssssssssssss s s ss s s s</td>
    </tr>
    <tr>
      <td>alpha</td>
      <td>beta</td>
    </tr>
  </table>
  <div style="position: absolute; top: 0pt; right: 0pt; bottom: 0pt;">
    <button style="height: 100%;">c</button>
  </div>
</div>

此解决方案的问题是您需要提供位于右侧宽度的内容，然后为表格添加边距，以便它不会隐藏在按钮后面。

您可以在this related question收集大量有关资料的信息。

Answer 3

我不建议使用<table>，因为它们的扩展方式与大多数元素不同（例如，如果表中的元素太大（如块/内联块/或长字）桌子会缩放，可能会丢掉你的布局。而且必须标记每一行会增加你的标记。

无论如何，如果你想跨越多行以便能够正确对齐<input type="submit"/>或者你想要做的任何事情，你可以简单地说：

<table>
  <tr>
    <!-- lots of other rows and stuff -->
    <td colspan="4" align="right"><!-- Adjust [colspan] to # of rows in yours -->
      <input type="submit" value="I'm on the right now!"/>
    </td>
  </tr>
</table>

align="right"执行您期望的操作 - 将内联/内联块元素向右对齐（通常是文本和图像）。 colspan="4"（再次，用你自己的列数替换）只是告诉表格你要合并表格的4列（从右边开始）。

所以，之前：

-------------------------
|  1  |  2  |  3  |  4  |
-------------------------
| <------ after ------> |
-------------------------

希望有所帮助。

如何使按钮伸展到桌子右侧的整个长度？

3 个答案: