我正在尝试将DIV HEAD创建为表格,但是当我添加另一个Head时,它将显示在下方而不是在右侧。

换句话说,我希望表的宽度为六列,但只有3列,并且行开始堆积。

这是一个现场演示:



    .rTable {
     display: block;
     width: 100%;
     font-size: 10px;
    }

    .rTableHeading, .rTableBody, .rTableFoot, .rTableRow{
     clear: both;
    }

    .rTableHead, .rTableFoot{
      background-color: #DDD;
      font-weight: bold;
    }

    .rTableCell, .rTableHead {
      border: 1px solid #999999;
      float: left;
      height: 17px;
      overflow: hidden;
      padding: 3px 1.8%;
      width: 28%;
    } 

   <div class="rTable">
      <div class="rTableRow">
        <div class="rTableHead">HEAD 1</div>
        <div class="rTableHead">HEAD 2</div>
        <div class="rTableHead">HEAD 3</div>
        <div class="rTableHead">HEAD 4</div>
        <div class="rTableHead">HEAD 5</div>
        <div class="rTableHead">HEAD 6</div>
      </div>

      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 1.1</div>
        <div class="rTableCell">row 1.2</div>
        <div class="rTableCell">row 1.3</div>
        <div class="rTableCell">row 1.4</div>
        <div class="rTableCell">row 1.5</div>
        <div class="rTableCell">row 1.6</div>
      </div>

      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 2.1</div>
        <div class="rTableCell">row 2.2</div>
        <div class="rTableCell">row 2.3</div>
        <div class="rTableCell">row 2.4</div>
        <div class="rTableCell">row 2.5</div>
        <div class="rTableCell">row 2.6</div>
      </div>

      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 3.1</div>
        <div class="rTableCell">row 3.2</div>
        <div class="rTableCell">row 3.3</div>
        <div class="rTableCell">row 3.4</div>
        <div class="rTableCell">row 3.5</div>
        <div class="rTableCell">row 3.6</div>
      </div>

    </div>

最佳答案

一种简单的方法是使用width: calc(100% / 6);(使一列成为父宽度的六分之一)和box-sizing: border-box;(忽略元素宽度的填充):



.rTable {
     display: block;
     width: 100%;
     font-size: 10px;
    }

    .rTableHeading, .rTableBody, .rTableFoot, .rTableRow{
     clear: both;
    }

    .rTableHead, .rTableFoot{
      background-color: #DDD;
      font-weight: bold;
    }

    .rTableCell, .rTableHead {
      border: 1px solid #999999;
      float: left;
      height: 17px;
      overflow: hidden;
      padding: 3px 1.8%;
      width: calc(100% / 6);
      box-sizing: border-box;
    }

<div class="rTable">
      <div class="rTableRow">
        <div class="rTableHead">HEAD 1</div>
        <div class="rTableHead">HEAD 2</div>
        <div class="rTableHead">HEAD 3</div>
        <div class="rTableHead">HEAD 4</div>
        <div class="rTableHead">HEAD 5</div>
        <div class="rTableHead">HEAD 6</div>
      </div>

      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 1.1</div>
        <div class="rTableCell">row 1.2</div>
        <div class="rTableCell">row 1.3</div>
        <div class="rTableCell">row 1.4</div>
        <div class="rTableCell">row 1.5</div>
        <div class="rTableCell">row 1.6</div>
      </div>

      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 2.1</div>
        <div class="rTableCell">row 2.2</div>
        <div class="rTableCell">row 2.3</div>
        <div class="rTableCell">row 2.4</div>
        <div class="rTableCell">row 2.5</div>
        <div class="rTableCell">row 2.6</div>
      </div>

      <div class="rTableRow" style="page-break-before:always;">
        <div class="rTableCell">row 3.1</div>
        <div class="rTableCell">row 3.2</div>
        <div class="rTableCell">row 3.3</div>
        <div class="rTableCell">row 3.4</div>
        <div class="rTableCell">row 3.5</div>
        <div class="rTableCell">row 3.6</div>
      </div>

    </div>

09-17 10:05
查看更多