Html CSS垂直显示表格，溢出时水平展开

我有一张桌子：

<table>
    <tbody>
        <tr>
            <th>title</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

---

如何在不使用javascript和更改HTML结构的情况下使用css/sass完成此操作？

我已更改了表结构这是您想要完成的吗

标题
1.
2.
3.
4.
5.
6.

使用css不可能做到这一点！唯一的方法是通过向th元素添加colspan atribute来更改html结构

5.
44

我认为这是不可能的

如果有人发现这是一种方式，它将是相当丑陋的，并不是真正按照CSS的原始想法

事实上，如果CSS提供它，我会觉得很尴尬，因为这不是CSS的想法

---

如果您能回答为什么不能重新使用该表或者为什么不能使用javascript，我们可能会更好地理解其必要性。

这可能是一个解决方案，但最好更改html结构

*{
保证金：0；
填充：0；
}
桌子，t车身，tr{
宽度：100%；
}
tr{
显示器：flex；
柔性流：柱包裹；
调整项目：灵活启动；
高度：80px；
位置：相对位置；
}
th{
位置：绝对位置；
显示：块；
宽度：100%；
高度：20px；
背景颜色：橙色；
}
运输署{
显示：块；
框大小：边框框；
宽度：50%；
高度：20px；
文本对齐：居中；
背景颜色：钢蓝色；
边框：1px实心#333；
}
td:nth类型（1）{
边缘顶部：20px；
}
td:nth类型（4）{
边缘顶部：20px；
}

标题
1.
2.
3.
4.
5.
6.

使用具有以下结构的css3列：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  ....
  ....
  <li>n</li>
</ul>

。自定义列表{
文本对齐：居中；
浮动：左；
列表样式：无；
列间距：0；
列数：2；
填充：0；
保证金：0；
}
.海关名单李{
边框：1px实心#000；
宽度：32px；
}

标题

一,
二,
三,
四,
五,
六,

您可以通过使用覆盖

tr

的默认

display

属性，在不更改标记的情况下实现这一点

棘手的部分是对单元格进行重新排序，因为每个

td

都需要一个单独的规则，因此，如果您有多个单元格，这可能会变得相当麻烦

tr{
背景：#fff；
边框：1px实心#666；
显示器：flex；
柔性包装：包装；
}
th，td{
边框：1px实心#666；
框大小：边框框；
颜色：#000；
字体系列：无衬线；
字体大小：14px；
}
th{
弹性：1100%；
字体大小：正常；
填充物：5px；
}
运输署{
弹性：150%；
填充：10px0；
文本对齐：居中；
}
td:nth类型（2）{
顺序：4；
}
td:nth类型（3）{
顺序：6；
}
td:nth类型（4）{
顺序：3；
}
td:nth类型（5）{
顺序：5；
}
td:nth类型（6）{
订单：7份；
}

标题
1.
2.
3.
4.
5.
6.

你能更改

HTML

结构吗？还是它是固定的？我认为你不能只使用CSS来更改HTML结构，你需要一种脚本语言来更改它或生成你想要的代码。@MuhammadUsman Hi！是的，它可以改变，但我想所有的都留在一个使用CSS网格..不。我的意思是。谢谢你的回答，但我想把所有的都放在一个：）你的意思是你只想把它们放在一个tr上？我明白了。稍微改变一下，仍然保持一个整体怎么样？如果添加一个或多个td，您会期望什么？将s等分为两列，当数量为奇数时，左列将比右列多1列。例如，如果有7个左栏有1-4个，右栏有5-7:）谢谢，但是我想要的顺序是从上到下再从左到右。你可以使用flex布局来实现你想要的，但它不是网格。如果某些单元格具有不同的高度，布局将中断。@Oriol是的，我大体上同意这可能不是最好的解决方案，但因为所有单元格都只有数字，OP希望保持当前结构，因此它可能适用于这种特殊情况。@Oriol在我的情况下，目前，这些牢房的高度相同，但我不知道是否会出现不同的情况height@MuhammadUsman I发现只有ie10以上才支持

列计数。ie9怎么样？@LynnChen是的ie9不支持列计数。您可以为IE9设置不同的样式，否则您必须更改所有浏览器的
HTML
结构。
<table>
<thead>
  <tr>
      <th colspan=2 class="text-center">title</th>
  </tr>
</thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
         <tr>
            <td>3</td>
            <td>4</td>
        </tr>
         <tr>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  ....
  ....
  <li>n</li>
</ul>

.custom-list {
  list-style: none;
  column-gap: 0;
  column-count: 2;
}