Разделить строки таблицы HTML без заголовков на 50 % влево и 50 % вправо
У меня есть 20 таких строк в стандартной html-таблице (table>tbody>tr>td) без заголовка. текущая ситуация
<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
<tr>
<td>18</td>
</tr>
<tr>
<td>19</td>
</tr>
<tr>
<td>20</td>
</tr>
</tbody>
</table>
Я хотел бы отобразить это так: желаемый результат
Когда я использую flexbox, он сортирует 1,2, следующую строку 3,4 и т. д.
Я нашел множество результатов о том, как делать другие вещи, но не это. Я помню, что это можно было сделать без JavaScript и без изменения HTML - и это была чистая CSS-фишка длиной в пару строк, но я больше не могу найти этот документ. Также искал в stackoverflow, но нигде не нашел. Если кто-нибудь может направить меня в правильное русло - спасибо!
Думаю, я могу с этим согласиться: современные способы используют элементы div/sections/etc, чтобы сделать их более отзывчивыми. Но у меня есть этот стол, так что придется с ним разобраться. + добавьте несколько точек останова, и мобильные устройства получат длинный список, а экраны большего размера получат 50/50. Сообщения, которые я читаю, похоже, не сходятся во мнениях относительно того, что лучше для SEO и т. д. html.com/tables VS htmltables.io/blog/beginners-guide-to-html-tables и т. д. Но для в некоторых приложениях это простой выбор. Я также не согласен с проблемой обслуживания кода на этой странице, возможно, для огромных/сложных таблиц, но я просто отображаю некоторые основные данные в этой таблице.
Таблицы действительно следует использовать только тогда, когда контент семантически табличный, например, когда он имеет заголовки строк или столбцов и имеет наибольший смысл (с точки зрения информации) в виде сетки. В противном случае следует использовать другие элементы, даже если они все еще представлены в виде сетки с помощью CSS.
Ответы 3
Хитрость заключается в том, чтобы убедиться, что width равен 50% и вам нужно тяготеть влево, например
tr {
float: left;
width: 50%;
}
tr {
float: left;
width: 50%;
}<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
<tr>
<td>18</td>
</tr>
<tr>
<td>19</td>
</tr>
<tr>
<td>20</td>
</tr>
</tbody>
</table>Я надеялся сделать это без плавания, насколько я помню, в этом не было необходимости. Но я протестирую обязательно. Спасибо!
Вот что-то близкое к этому, используя столбцы CSS и параметры display, отличные от исходных (табличных):
table {
display: block;
}
tbody {
display: block;
width: 120px;
column-count: 2;
column-gap: 0;
}
tr {
display: block;
width: 60px;
text-align: center;
border: 1px solid #ccc;
}
td {
display: inline;
}<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
<tr>
<td>18</td>
</tr>
<tr>
<td>19</td>
</tr>
<tr>
<td>20</td>
</tr>
</tbody>
</table>Спасибо, это было то, что я искал. Вы также можете создать div-оболочку и установить количество столбцов: 2; на этом или на теле (я узнал это только во время тестирования). Есть какая-нибудь документация, где я могу это найти? Тогда я отмечу это как ответ.
документация о том, что вы имеете в виду? По сути, используя эти настройки display, я просто отключаю автоматическое отображение всех этих элементов в таблице и использую счетчик столбцов, чтобы разместить ее в двух столбцах. Документацию по столбцам CSS можно найти здесь: Developer.mozilla.org/en-US/docs/Web/CSS/columns (также обратите внимание на ссылки на другие параметры столбцов в левой части этой страницы).
CSS-сетка также может выполнить эту работу
table,
tbody {
display: grid;
grid-auto-flow: dense;
justify-content: start;
}
table tr {
grid-column: 1;
}
table tr:nth-child(n + 11) {
grid-column: 2;
}
/* styling */
tr {
display: grid;
place-content: center;
padding: 2px 5px;
background: #f2f2f2;
border:1px solid;
}<table>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
<tr>
<td>18</td>
</tr>
<tr>
<td>19</td>
</tr>
<tr>
<td>20</td>
</tr>
</tbody>
</table>ОП хотел первые 10 в левом столбце. n + 20, кажется, этого не достигает, но сложно придумать, как настроить его, чтобы получить результат.
@ralph.m uodated
Это также очень интересный вариант, возможно, даже лучший, поскольку вам не нужно изменять спецификации таблицы (установить блок/встроенный блок в table/tbody/tr/td). Я протестирую это завтра/послезавтра и проверю некоторые документы, посмотрю, что лучше, а также поддержку браузера/защищенность от будущего. подлежит уточнению
@TemaniAfif — Ах, красиво. Я пробовал это безуспешно, но забыл про dense.
Трудно сказать без дополнительного контекста, но это не похоже на табличную информацию. Таблица может быть неправильным способом разметки этого контента.