Question

我有一张桌子：

<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>

，我希望像这样显示表格：

+-----------+
| title     |
+-----+-----+
|  1  |  4  |
+-----+-----+
|  2  |  5  |
+-----+-----+
|  3  |  6  |
+-----+-----+

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

Answer 1

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

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

用css如下：

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

.custom-list {
  text-align: center;
  float: left;
  list-style: none;
  column-gap: 0;
  column-count: 2;
  padding: 0;
  margin: 0;
}
.custom-list li {
  border: 1px solid #000;
  width: 32px;
}

<div class="title">title</div>
<ul class="custom-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

但是，如果您无法更改结构，则需要覆盖<tr>和<td>的默认行为，并在此处应用css3列。

.custom-table {
  text-align: center;
}
.custom-table thead th {
  text-align: left;
}
.custom-table tbody tr {
  column-count: 2;
  column-gap: 0;
  display: block;
}
.custom-table tbody tr td {
  border: 1px solid #000;
  min-width: 32px;
  display: block;
}

<table class="custom-table">
  <thead>
    <tr>
      <th colspan="2">title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

Answer 2

我认为不可能。

如果有人发现它会变得相当难看，而且根本不符合CSS的原始想法。

实际上如果CSS会提供它，我会发现它很尴尬，因为那不是CSS的想法。

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

Answer 3

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

＆＃13;

*{
  margin:0;
  padding:0;
}
table,tbody,tr{
 width:100%;
}
tr{
  display:flex;
  flex-flow:column wrap;
  align-items:flex-start;
  height:80px;
  position:relative;
}

th{
  position:absolute;
  display:block;
  width:100%;
  height:20px;
  background-color:orange;

  }

td{
 display:block;
  box-sizing:border-box;
  width:50%;
  height:20px;
  text-align:center;
  background-color:steelblue;
  border:1px solid #333;
  

}

td:nth-of-type(1){
  margin-top:20px;
}
td:nth-of-type(4){
  margin-top:20px;
}

＆＃13;

<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>

＆＃13;

Answer 4

我已经改变了表格结构，这是你想做的事情

https://jsfiddle.net/qLgxrob1/1/

<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>

Answer 5

用css做不到这一点！唯一的方法是通过将colspan属性添加到您的元素

来更改html结构

＆＃13;

<table border="1">
  <tr>
    <th colspan="2">5</th>
  </tr>
  <tr>
    <td>4</td><td>4</td>
  </tr>
</table>

＆＃13;

Answer 6

您可以使用Flexbox覆盖标记，而不会更改标记，从而覆盖display的默认tr属性。

棘手的部分是重新排序单元格，因为它需要每个td的单独规则，所以，如果你有多个单元格，这可能会变得非常麻烦。

tr{
  background:#fff;
  border:1px solid #666;
  display:flex;
  flex-wrap:wrap;
}
th,td{
  border:1px solid #666;
  box-sizing:border-box;
  color:#000;
  font-family:sans-serif;
  font-size:14px;
}
th{
  flex:1 1 100%;
  font-weight:normal;
  padding:5px;
}
td{
  flex:1 1 50%;
  padding:10px 0;
  text-align:center;
}
td:nth-of-type(2){
  order:4;
}
td:nth-of-type(3){
  order:6;
}
td:nth-of-type(4){
  order:3;
}
td:nth-of-type(5){
  order:5;
}
td:nth-of-type(6){
  order:7;
}

<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>

CSS显示表垂直显示，溢出时水平扩展

6 个答案: