在HTML中使用div制作表格

Question

我想通过在html＆amp;中使用DIV来制作这样的表格。 CSS desired result 但是我有一张这样的桌子gained result 我尝试但无法获得理想的结果。我需要更改代码的地方？谁可以帮我这个？

＆＃13;

＆＃13;

.tableMain {
  display: table;
  width: 100%;
  background-color: black;
}

.tableRow {
  display: table-row;
  color: aqua;
}

.tableCell,
.tableHead {
  border: 1px solid aqua;
  display: table-cell;
  padding-left: 5px;
}

.tableHeading {
  display: table-header-group;
  font-weight: bold;
}

.tableBody {
  display: table-row-group;
}

＆＃13;

<div class="tableMain">
  <div class="tableBody">
    <div class="tableRow">
      <div class="tableCell">
        <h2>Header-1</h2>
      </div>
      <div class="tableCell">
        <h2>Header-2</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-1</h2>
      </div>
      <div class="tableCell">
        <h3>Title</h3>
        <h4>Description</h4>
        <ul>
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-2</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>header-1</h2>
      </div>
      <div class="tableCell">
        <h2>header-2</h2>
      </div>
      <div class="tableCell">
        <h2>header-3</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <p>A</p>
      </div>
      <div class="TableCell">
        <p>B</p>
      </div>
      <div class="tableCell">
        <p>C</p>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <p>A</p>
      </div>
      <div class="tableCell">
        <p>B</p>
      </div>
      <div class="tableCell">
        <p>C</p>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <p>A</p>
      </div>
      <div class="tableCell">
        <p>B</p>
      </div>
      <div class="tableCell">
        <p>C</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

...这是使用css 伪造表格的唯一缺点 - 你不能假冒$('#SomeTextInput').val("@sometext"); 和colspans。

因此，手动设置确切的表格可能是可能的，但对于动态内容来说，这并不容易。

实际上这就是为什么存在这么多html元素的原因 - 每个元素都有它的目的。我觉得rowspans最适合这种情况。

如果你使用div来使表响应，你可以反过来做 - 即样式表行，表格单元格等，在需要时看起来像div元素。

Answer 2

你可以试试这个

HTML

<div class="table">
<div class="table-row">
<div class="table-cell">Header1</div>
  <div class="table-cell">Header2</div>
</div>
  <div class="table-row">
  <div class="table-cell">section1</div>
    <div class="table-cell">
      <div>title</div>
      <div>description</div>
      <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item 3</li></ul>
    </div>
  </div>
  <div class="table-row">
  <div class="table-cell">Section2</div>
  <div class="table-cell">

    <div class="table">
    <div class="table-row">
    <div class="table-cell">

      Header 1
      <div>
        A
      </div>
      <div>
      B
      </div>
      <div>
      C
      </div>
    </div>
    <div class="table-cell">
    Header 2
       <div>
        A
      </div>
      <div>
      B
      </div>
      <div>
      C
      </div>
    </div>
    <div class="table-cell">
      header 3
       <div>
        A
      </div>
      <div>
      B
      </div>
      <div>
      C
      </div>
    </div>
    </div>
    </div>

  </div>
  </div>
</div>

CSS

.table
{
  display:table;
  border:1px solid;
  width:100%;
  text-transform:capitalize;
}
.table-row
{
  display:table-row;
  border:1px solid;
}
.table-cell
{
  display:table-cell;
  vertical-align:middle;
  border:1px solid;
}

此处是参考链接codepen link here

Answer 3

您的HTML结构有一些错误.. 你看..最后一个单元格中有一个完整的表格，所以你的HTML结构应该在最后一个单元格中有一个完整的表格，如下所示：

＆＃13;

＆＃13;

.tableMain {
  display: table;
  width: 100%;
  background-color: black;
}

.tableRow {
  display: table-row;
  color: aqua;
}

.tableCell,
.tableHead {
  border: 1px solid aqua;
  display: table-cell;
  padding-left: 5px;
}

.tableHeading {
  display: table-header-group;
  font-weight: bold;
}

.tableBody {
  display: table-row-group;
}

.body {
  margin: 0px;
}

＆＃13;

<div class="tableMain">
  <div class="tableBody">
    <div class="tableRow">
      <div class="tableCell">
        <h2>Header-1</h2>
      </div>
      <div class="tableCell">
        <h2>Header-2</h2>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-1</h2>
      </div>
      <div class="tableCell">
        <h3>Title</h3>
        <h4>Description</h4>
        <ul>
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
      </div>
    </div>
    <div class="tableRow">
      <div class="tableCell">
        <h2>Section-2</h2>
      </div>
      <div class="tableRow">
        <div class="tableMain">
          <div class="tableBody">
            <div class="tableRow">
              <div class="tableCell">
                <h2>header-1</h2>
              </div>
              <div class="tableCell">
                <h2>header-2</h2>
              </div>
              <div class="tableCell">
                <h2>header-3</h2>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="TableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="tableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
            <div class="tableRow">
              <div class="tableCell">
                <p>A</p>
              </div>
              <div class="tableCell">
                <p>B</p>
              </div>
              <div class="tableCell">
                <p>C</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;