Могу ли я отобразить HTML-таблицу на кнопку HTML?

Question

Я хочу отобразить 3 кнопки, которые содержат 5 значений рядом. Я хочу улучшить отображение кнопки.

Пример:

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

Итак, каждая строка выше должна быть на кнопке. Таким образом, у меня есть 3 кнопки, но отображение на кнопках должно быть таким, как будто я отображаю таблицу. У вас есть предложения?

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

Answer 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.
});