Question

请原谅我对编程的经验不足 - 我会尽量表达清楚。如果我不够具体或者我遗漏了别的东西，请告诉我。

我正在寻找一个解决我正在面对的一个项目的问题的解决方案，涉及HTML中的表格。在桌面上，我在下面的HTML代码以我喜欢的方式运行，因为屏幕足够大以适应其父div内的表。但是，在移动浏览器上，父div的宽度较小，这导致表格过度流动。我的表垂直读取，因为它是从最高到最低的列表，因此理想情况下，第二列（和后续列）中的内容将放置为宽度较小的浏览器上第一列的扩展名。所以这段代码......

<div class="parent-class">
<table>
<tr class="row-one">
<td>Item 1</td>
<td>Item 4</td>
<td>Item 7</td>
</tr>
<tr class="row-two">
<td>Item 2</td>
<td>Item 5</td>
<td>Item 8</td>
</tr>
<tr class="row-three">
<td>Item 3</td>
<td>Item 6</td>
<td>Item 9</td>
</table>
</div>

......读到这个：

|--------------------------|
| Item 1 | Item 4 | Item 7 |
|--------------------------|
| Item 2 | Item 5 | Item 8 |
|--------------------------|
| Item 3 | Item 6 | Item 9 |
|--------------------------|

但是在较小的浏览器中，第二列和第三列会溢出并在父div上生成水平滚动条，这是不理想的。另外，拥有一个包含多列的垂直表可能是移动设备的不良做法（我的实际表格要长得多）。因此，为了最大限度地提高可读性而不丢失任何内容，我希望表格在移动设备上阅读：

|--------|
| Item 1 |
|--------|
| Item 2 |
|--------|
| Item 3 |
|--------|
| Item 4 |
|--------|
| Item 5 |
|--------|
| Item 6 |
|--------|
| Item 7 |
|--------|
| Item 8 |
|--------|
| Item 9 |
|--------|

最后，如果可能的话，我宁愿只使用CSS来完成表的“重新排列”，而无需修改HTML或引入JavaScript。我知道这可能是不好的做法，但我想知道在我决定如何解决问题之前是否可能。

我已经研究过使用@media并使用tr:nth-child(n)选择相关的单元格，但是找不到实际上允许我按照描述重新定位相关单元格的解决方案。 CSS中是否有解决方案？我应该将JavaScript作为替代方案吗？

提前致谢。

Answer 1

将表格更改为div / sections并使用此溶剂。

<强> @EDIT

$ /usr/bin/perl -Mutf8 -MEncode -E 'say $Encode::VERSION; say encode(MIME_Header => q{From: "児島 新" <shin@kojima.org>});'
2.49
From: "=?UTF-8?B?5YWQ5bO2IOaWsA==?=" <shin@kojima.org>

.parent-class {
max-width: 600px;
margin: 0 auto;
overflow: hidden;
}

.row {
box-sizing: border-box;
width: 200px;
float: left;
margin: 0;
text-align: center;
}

.row p {
margin: 0;
padding: 10px;
border: 1px solid #888;
}

另外，您可以使用媒体查询将元素放在.parent-class中，但此代码不使用此方法。

是否可以在HTML表格的第二列中选择单元格并使用CSS将它们移动到第一列的底部？

1 个答案: