主页 / 问题 / 1190587
Accepted
tonchikp
Asked:2021-10-15 16:08:02 +0800 CST2021-10-15 16:08:02 +0800 CST

表格的垂直填充

  • 772

你能告诉我是否可以垂直而不是水平地填充 html 表？

单元格代码如下：

<tr>
 <td>1
 <td>2
 <td>3
<tr>
 <td>4
 <td>5
 <td>6

并像这样输出：

|1|4|

|2|5|

|3|6|

html

3 个回答

  1. 您可以尝试使用flex例如

    .block {
    display:        flex;
    flex-direction: column;
    flex-wrap:      wrap;
    
    width:          50px;
    height:         100px;
    
    border:         1px solid red;
}

.block div {
    flex:           1 1 33%;
}
    <div class = 'block'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

    你也可以试试grid，例如

    .block {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-auto-flow: column;
    
    width:                  50px;
    
    border:                 1px solid red;
}

.block div {
    border:                 1px solid lime;
}
    <div class = 'block'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

    • 1
  2. Best Answer

    您可以使用 flex，例如：

    tbody {
  display:flex;
}
tr {
  display:flex;
  flex-direction: column;
  flex-wrap:      wrap;
}
td {
  border: 1px solid red;
}
    <table>
  <tbody>
    <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
    </tr>
    <tr>
     <td>4</td>
     <td>5</td>
     <td>6</td>
    </tr>
  </tbody>
</table>

    • 1

  3. 立即使用表格，不要为 grid 和 flex 操心。此外，在执行代码时，这些家伙的所有答案都不是您需要的结果。

    table {
  padding: 3px;
  border: 1px solid red;
  border-radius: 3px;
}

td {
  border: 1px solid black;
}
    <table>
    <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>
</table>

    • 1

相关问题