代码之家 › 专栏 › 技术社区 › Vithushan

如何使“display:table”的多div以单行显示

angular6 css html

Vithushan · 技术社区 · 8 年前

Im使用div而不是table来显示数据,如下所示。

我想在一行显示数字,比如1-30,而不是打断到下一行。我的代码是:

<div class="div-table">
    <div class="div-table-row">
        <div class="div-header-col">Levels</div>
        <div *ngFor="let x of dates" class="div-date-col">{{x}}</div>
    </div>
</div>

和css:

.div-table {
    display: table;         
    width: auto;         
    background-color: #eee;
    // border-spacing: 5px;
}
.div-table-row {
    display: table-row;
    width: auto;
    clear: both;
}

.div-date-col {
    float: left;
    display: table-column;         
    width: 50px;    
    text-align:  center;
    border: 1px solid black;     
}

.div-header-col {
    float: left;
    display: table-column;         
    width: 200px;         
}

4 回复 | 直到 8 年前

Raúl Álvarez Hinojosa 8 年前

silpa jacob 8 年前

你可以试试这个。

.div-table {
  background-color: #eee;
}

.div-table-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  clear: both;
}

.div-date-col {
  width: calc(100%/30);
  text-align: center;
  border: 1px solid black;
}

.div-header-col {
  width: 200px;
}

Richard Pariath 8 年前

添加把它放在同一排。

<div style="display: flex;flex-wrap:nowrap">   
 <div class="div-table">
     <div class="div-table-row">
            <div class="div-header-col">Levels</div>
            <div *ngFor="let x of dates" class="div-date-col">{{x}}</div>
      </div>
  </div>
</div>

harkesh kumar 8 年前

<table>
  <tr >
    <td> Levels</td>
  </tr>
  <tr *ngFor="let x of dates">
    <td class="div-date-col"> {{x}}</td>
  </tr>
</table>

Demo

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前