我可以在 html 按钮上显示 html 表格吗？答案

【问题标题】：Can I display html table on html button?我可以在 html 按钮上显示 html 表格吗？
【发布时间】：2011-07-28 00:09:17
【问题描述】：

我想并排显示包含 5 个值的 3 个按钮。我想增强按钮的显示。

例子：

1    aombhkjsdhffhf   hehehe     4   5
2    khdjhfhf         dhjfhj     6   7
3    hhkjhdjkhdjh     jhkjhjkh   8   9

因此，上面的每一行都需要在一个按钮上。所以我有 3 个按钮，但按钮上的显示需要像显示表格一样。你有什么建议吗？

【问题讨论】：

你可以让表格单元看起来像按钮：td { border: 1px outset #666; bg: .. }
某处 UI 开发人员要打毛茸茸的兔子......为了可用性，一个看起来更理智的带有工具提示的按钮来呈现扩展数据怎么样？

标签： html css button html-table

【解决方案1】：

您可以在<button> 标记内放置一个表格。

<button>
    <table>
    <tr>
    <td>1</td>
    <td>aombhkjsdhffhf</td>
    <td>hehehe</td>
    <td>4</td>
    <td>5</td>
    </tr>
    </table>
</button>
<br>
<button>
    <table>
    <tr>
    <td>2</td>
    <td>khdjhfhff</td>
    <td>dhjfhj</td>
    <td>6</td>
    <td>7</td>
    </tr>
    </table>
</button>
<br>
<button>
    <table>
    <tr>
    <td>3</td>
    <td>hhkjhdjkhdjk</td>
    <td>jhkjhkjh</td>
    <td>8</td>
    <td>9</td>
    </tr>
    </table>
</button>

并定义 css 使 td 元素具有一定的宽度：

td{width:100px;}

请参阅JSFiddle 上的示例。

【讨论】：

嘿，非常感谢。这正是我的要求。但是，我需要使用提交按钮来完成这件事，即使用 type="submit" 的输入标签。抱歉，我现在就告诉了，但这是我的要求。
所以，现在三个按钮都是提交按钮，如果我点击任何一个，每个按钮都会重定向到自己的页面。
嘿，我得到了输出......

【解决方案2】：

这听起来像是您可以使用 css 和 javascript 轻松处理的事情。换句话说，渲染一个普通的 html 表格，使用 CSS 使每一行看起来像一个按钮，并使用 javascript 将事件处理程序绑定到每一行的点击。

HTML

<table>
  <tr class="button">
    <td>aombhkjsdhffhf</td>
    <td>hehehe</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr class="button">
    <td>khdjhfhf</td>
    <td>jhkjhjkh</td>
    <td>6</td>
    <td>7</td>    
  </tr>
  <tr class="button">
    <td>hhkjhdjkhdjh</td>
    <td>dhjfhj</td>
    <td>8</td>
    <td>9</td>    
  </tr>
</table>

CSS

tr.button {
  /* the css to make each row look like a button */
}

Javascript

// using jQuery
$('tr.button').click(function() {
  // do whatever here.
});

【讨论】：

要使表格行看起来像一个按钮需要一些工作，尤其是在模拟悬停和推动时。