Как сверстать таблицу с кнопкой в каждой строке?
Дана такая таблица. Как сделать так, чтобы колонки и кнопка выглядели адекватно?
Код:
<table class="advantages__table"> <caption class="advantages__table-title title-2">VMI on GPU Instances</caption> <thead> <tr> <th>Instance name</th> <th>GPU</th> <th>vCPU</th> <th>RAM,Gb</th> <th>Storage NVMe EBS,Gb</th> <th>Ethernet throughput, Gb/s</th> <th>EBS throughput, Mbit/s</th> </tr> </thead> <tbody> <tr> <td>K80_1.4</td> <td>1</td> <td>4</td> <td>61</td> <td>100</td> <td>10</td> <td>1500</td> </tr> <tr> <td>K80_8.32</td> <td>8</td> <td>32</td> <td>488</td> <td>200</td> <td>10</td> <td>4500</td> </tr> <tr> <td>K80_16.64</td> <td>16</td> <td>64</td> <td>732</td> <td>500</td> <td>25</td> <td>7000</td> </tr> </tbody> </table> |
<table class="advantages__table"> <caption class="advantages__table-title title-2">VMI on GPU Instances</caption> <thead> <tr> <th>Instance name</th> <th>GPU</th> <th>vCPU</th> <th>RAM,Gb</th> <th>Storage NVMe EBS,Gb</th> <th>Ethernet throughput, Gb/s</th> <th>EBS throughput, Mbit/s</th> </tr> </thead> <tbody> <tr> <td>K80_1.4</td> <td>1</td> <td>4</td> <td>61</td> <td>100</td> <td>10</td> <td>1500</td> </tr> <tr> <td>K80_8.32</td> <td>8</td> <td>32</td> <td>488</td> <td>200</td> <td>10</td> <td>4500</td> </tr> <tr> <td>K80_16.64</td> <td>16</td> <td>64</td> <td>732</td> <td>500</td> <td>25</td> <td>7000</td> </tr> </tbody> </table>
.advantages__table{ width: 100%; margin-bottom: 20px; border: 5px solid #fff; border-top: 5px solid #fff; border-bottom: 3px solid #fff; border-collapse: collapse; font-size: 15px; } .advantages__table-title { color: var(--gray); margin: 50px 0 30px 0; } .advantages__table th { font-weight: bold; padding: 7px; border: none; text-align: center; font-size: 15px; border-top: 3px solid #fff; } .advantages__table td{ text-align: center; padding: 7px; border: none; border-top: 3px solid #fff; border-bottom: 3px solid #fff; font-size: 15px; } .advantages__table tbody tr:nth-child(1){ background: var(--green); } .advantages__table tbody tr:nth-child(2){ background: var(--white); } .advantages__table tbody tr:nth-child(3){ background: rgb(225, 236, 228); } |
.advantages__table{ width: 100%; margin-bottom: 20px; border: 5px solid #fff; border-top: 5px solid #fff; border-bottom: 3px solid #fff; border-collapse: collapse; font-size: 15px; } .advantages__table-title { color: var(--gray); margin: 50px 0 30px 0; } .advantages__table th { font-weight: bold; padding: 7px; border: none; text-align: center; font-size: 15px; border-top: 3px solid #fff; } .advantages__table td{ text-align: center; padding: 7px; border: none; border-top: 3px solid #fff; border-bottom: 3px solid #fff; font-size: 15px; } .advantages__table tbody tr:nth-child(1){ background: var(--green); } .advantages__table tbody tr:nth-child(2){ background: var(--white); } .advantages__table tbody tr:nth-child(3){ background: rgb(225, 236, 228); }
Дополнительно:
Как сделать так, чтобы колонки и кнопка выглядели адекватно?
Адекватность чем измеряется?
А в чем сложность?
snippet
- В адаптиве сложность)
У меня мозг сломался на том, как сделать адаптив данной таблицы с кнопкой - oksana_melikhova, обновил ответ
- Сергей delphinpro, Большое спасибо! Хоть поняла, как такое верстать)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для верстки таблицы с кнопкой в каждой строке вам нужно использовать HTML и CSS. Ниже приведен пример кода на HTML и CSS для создания такой таблицы:
HTML:
<table> <tr> <th>Заголовок колонки 1</th> <th>Заголовок колонки 2</th> <th>Заголовок колонки 3</th> <th>Действие</th> </tr> <tr> <td>Данные 1</td> <td>Данные 2</td> <td>Данные 3</td> <td><button>Кнопка</button></td> </tr> <tr> <td>Данные 4</td> <td>Данные 5</td> <td>Данные 6</td> <td><button>Кнопка</button></td> </tr> </table><table> <tr> <th>Заголовок колонки 1</th> <th>Заголовок колонки 2</th> <th>Заголовок колонки 3</th> <th>Действие</th> </tr> <tr> <td>Данные 1</td> <td>Данные 2</td> <td>Данные 3</td> <td><button>Кнопка</button></td> </tr> <tr> <td>Данные 4</td> <td>Данные 5</td> <td>Данные 6</td> <td><button>Кнопка</button></td> </tr> </table>
CSS:
table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #000; padding: 8px; text-align: left; } button { padding: 5px 10px; background-color: #007bff; color: #fff; border: none; cursor: pointer; }
В данном примере создается таблица с четырьмя колонками, в последней из которых располагается кнопка. Вы можете добавить необходимое количество строк и стилей, чтобы таблица выглядела так, как вам нужно. При необходимости вы также можете использовать JavaScript для добавления функциональности кнопкам в таблице.