在真实表格 td 中使用带有显示表格单元格的 div答案

【问题标题】：Using div with display table-cell inside real tables td在真实表格 td 中使用带有显示表格单元格的 div
【发布时间】：2015-07-14 01:55:35
【问题描述】：

我有一个用真实表格创建的复杂布局，它工作正常，但现在我使用 DIVS 创建了一个新布局，它工作正常，直到我在手机上测试高度，它看起来很糟糕，它只是不想保留我的高度 100% 测试也将页脚设置为边距底部 0 并且什么都没有，所以我将测试以下内容：

<table style="width:100%;height:100%;border:0;border-spacing:0px;border-collapse:collapse;">
  <tr>
    <td style="height:21px;"> 

<DIV style="display: table-cell;"> divvvvv </div></td>

  </tr>
  <tr>
    <td style="height:79px;"">


    </td>
  </tr>
  <tr>
    <td style="height:100%;"> </td>
  </tr>
  <tr>
    <td style="height:21px;"> </td>
  </tr>
</table>

问题是，我可以在不添加 div-display-table 和 div-display-row 的情况下将这些 div 添加到 table TD 元素中吗？对我来说，最好的方法似乎是混合表格和 div。那么混合它们的正确方法是什么？因为表格中的 TD 也不尊重高度和宽度，所以我必须同时使用表格和 div 似乎...

像这样：

<div class="container">

    <div class="row">

        <div class="column">Column 1</div>

        <div class="column">Column 2</div>

        <div class="column">Column 3</div>

    </div>

    <div class="row">

        <div class="column">Column 1</div>

        <div class="column">Column 2</div>

        <div class="column">Column 3</div>

    </div>

</div>

【问题讨论】：

你为什么要删除这些表？你在显示数据，对吧？
我不显示数据只是创建页面布局宽度 100% 和高度 100%
不要不要将表格用于布局目的！

标签： html css html-table

【解决方案1】：

将表格元素与 div 混合最终会让您头疼，尤其是在响应式设计方面。对于同样的问题，我使用Bootstrap CSS。他们有一个网格系统，在替换表格样式布局和适应移动设备方面非常有效。您的目标 HTML 实际上非常接近 Bootstrap 使用的标记，因此您的头脑显然是在正确的位置！

下载 Bootstrap js 和 css 后，我会做这样的事情：

<!-- the container-fluid class creates a full-width container -->
<div class="container-fluid"> 

    <!-- the row class creates a row broken into 12 columns. -->
    <div class="row">

        <!-- specify how many columns an element should take up out of 12 for each given device.  below is the markup for 3 evenly-spaced columns for a medium (desktop) device -->

        <div class="col-md-4">Column 1</div>

        <div class="col-md-4">Column 2</div>

        <div class="col-md-4">Column 3</div>

    </div>

    <div class="row">

        <div class="col-md-4">Column 1</div>

        <div class="col-md-4">Column 2</div>

        <div class="col-md-4">Column 3</div>

    </div>

</div>

【讨论】：

没问题！我忘了补充一点，您可以（并且应该）为不同大小的设备使用多个列类。我通常为我的列指定 md（桌面）和 xs（智能手机）col 大小，这似乎涵盖了大多数情况。

【解决方案2】：

我试图理解你想要什么，但不是很清楚......所以这就是我假设你的意思。

DEMO

CSS：

.container {
    display:table;
    height:200px;
    border:1px solid red;
}

.column {
    display:inline-block;
}

table {
    border: 1px solid black;
}

td {
    width:150px;
    border: 2px solid blue;
}

HTML：

<table style="width:100%;height:100%;border:0;border-spacing:0px;border-collapse:collapse;">
  <tr>
    <td style="height:21px;"> 
        <div class="container">
             <div class="row">
                  <div class="column">Column 1</div>
                  <div class="column">Column 2</div>
                  <div class="column">Column 3</div>
             </div>
             <div class="row">
                  <div class="column">Column 1</div>
                  <div class="column">Column 2</div>
                  <div class="column">Column 3</div>
             </div>
        </div>
    </td>
  </tr>
  <tr>
    <td style="height:79px;"">


    </td>
  </tr>
  <tr>
    <td style="height:100%;"> </td>
  </tr>
  <tr>
    <td style="height:21px;"> </td>
  </tr>
</table>

【讨论】：