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

Question

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

实施例：

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

因此，每个线之上需要是上的按钮。所以我有3个按钮，但按钮上的显示需要像显示表一样。 你有什么建议吗？

Answer 1

这听起来像你可以轻松处理与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. 
}); 

Answer 2

你可以把一个表<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元件具有一定的宽度：上JSFiddle

td{width:100px;} 

见样品。