Способ группировки ячеек таблицы вместе в HTML? - PullRequest
Новая
       15

Способ группировки ячеек таблицы вместе в HTML?

15 голосов
/ 24 марта 2012

Так что все довольно просто. Мне нужен способ сгруппировать клетки вместе. Как <div> или <span>, но ни один из них не работал. <tbody> казалось хорошим решением, но оно работает только для строк таблицы. Помогите!

Ответы [ 2 ]

1 голос
/ 25 июня 2019

Если вы ищете способ объединить 2 или более ячеек подряд в одну отдельную ячейку вместе с другими " обычными " ячейками (как вы это сделали бы в электронная таблица Google | Excel) примерно так:

Merged Cells inside a table with other regular rows

тогда вы можете использовать атрибут colspan для элементов td, указывающий, сколько ячеек вы объединяете : 

<tr>
  <td colspan=2> Merged Cell occupying 2 columns </td>
</tr>
<tr>
  <td> Regular cell </td>
  <td> Another cell in same row </td>
</tr>

Кроме того, вы можете использовать селектор td[colspan] в css (в сочетании с любым родительским селектором по вашему выбору) для ссылки на эти объединенные ячейки.

Вот рабочий пример: 

/* Style for cells with any colspan attribute */
td[colspan] {
  text-align: center;
}

/* No extra space between cells */
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  margin: 0;
  padding: 3px 10px;
  text-align: right;
}
<table>
  <tr>
    <th>Day</th>
    <th>Invoice</th>
    <th>Total</th>
  </tr>
  <tr>
    <!-- this cell will occupy 3 columns -->
    <td colspan=3>January</td>
  </tr>
  <tr>
    <td>2</td>
    <td>0348</td>
    <td>248.35</td>
  </tr>
  <tr>
    <td>7</td>
    <td>0349</td>
    <td>126.14</td>
  </tr>
  <tr>
    <td>18</td>
    <td>0350</td>
    <td>821.99</td>
  </tr>
  <tr>
    <td colspan=3>February</td>
  </tr>
  <tr>
    <td>27</td>
    <td>0351</td>
    <td>643.50</td>
  </tr> 
</table>
0 голосов
/ 27 октября 2016

Вы можете добавить тег html col для группировки столбцов td. 

.col-group-1 {
  background-color: yellow;
 }

.col-group-2 {
  background-color: silver;
 }
<table>
  <colgroup>
    <col class="col-group-1">
    <col span="2" class="col-group-2">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Mary</td>
    <td>New york</td>
    <td>987654321</td>
  </tr>
  <tr>
    <td>Magdalena</td>
    <td>Los Angeles</td>
    <td>123456789</td>
  </tr>
</table>

</body>
</html>

Пожалуйста, проверьте тег html col

и как их использовать с CSS стиль

...