如何获得一个外部div而不导致内部div的换行

时间：2018-09-16 09:59:48

标签： html css

我正在尝试在css和html中使用水平和垂直滚动创建一个数据网格。 每行是一个div， 我的5个单元格中的每一个均是一个宽度为100px的div。

当我将网格调整为小于500像素时，单元格会换行，而不是滚动。

唯一可行的解​​决方案是使div的行宽为500px-但我不喜欢它。

如何在不特别设置的情况下使行div与其子级的宽度相匹配。

.myGrid{
  max-width:300px;
  max-height:200px;
  overflow:scroll;
  display:block;
}
.td,
    .th {
      background-color: antiquewhite;
      width: 100px;
      float: left;
    }

    .thead {
      position: sticky;
      top: 0px;
    }

    .th {
      font-weight: bold;
    }

    .tr {
      display: block;
      clear: both;
    /*  width:500px; this solves my problem but I don't want it*/
    }
<div class="myGrid">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

float就是这样工作的。只有在有足够空间的情况下，它才会占有一席之地。

我的建议是使用flex。

  1. 将float个div（.tr）的父级定义为display: flex。
  2. 要确保子级的宽度为100px，并确保网格水平滚动，请将其设置为flex: 0 0 100px。

.myGrid {
  max-width: 300px;
  max-height: 200px;
  overflow: scroll;
  display: block;
}

.td,
.th {
  background-color: antiquewhite;
  flex: 0 0 100px;
}

.thead {
  position: sticky;
  top: 0px;
}

.th {
  font-weight: bold;
}

.tr {
  display: flex;
  clear: both;
  /*  width:500px; this solves my problem but I don't want it*/
}
<div class="myGrid">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>

有关flex的更多信息，请参见出色的教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

相关问题
最新问题