使用 div 显示 table-cell inside real tables td

Question

我用真正的 tables 创建了一个复杂的布局，它工作正常但现在我使用 DIVS 创建了一个新布局并且它工作正常，直到我在手机上测试高度并且它看起来很糟糕，它只是不想让我的身高保持 100% 测试也将页脚设置为 margin bottom 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>

问题是，我可以在 table TD 元素中添加那些 div 而不添加 div-display-table 和 div-显示行前？对我来说最好的方法似乎是混合 tables 和 divs。那么混合它们的正确方法是什么？因为表格中的 TD 不会考虑高度和宽度，所以我必须同时使用 tables 和 divs 看起来像 ...

像这样：

<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>

Answer 1

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

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>

Answer 2

将 table 元素与 div 混合最终会让您头疼，尤其是在响应式设计方面。对于同样的问题，我使用 Bootstrap CSS。他们有一个网格系统，在替换 table 风格的布局和适应移动设备方面非常有效。您的目标 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>

使用 div 显示 table-cell inside real tables td

Using div with display table-cell inside real tables td

html

css

html-table