Using div with display table-cell inside real tables td - html

Question

I have a complicated layout created with real tables and it works fine but now I created a new layout using DIVS and it worked fine until I tested height on cellphones and it looks pretty bad, it just don't want to keep my height 100% tested also set footer to margin bottom 0 and nothing so I will test the follow:
<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>
The question is, can I add those divs inside the table TD element without adding div-display-table and div-display-row before? It seems like the best way to go for me is to mix tables and divs. What would then be the correct way of mixing them? Because TDs in Tables will not respect the height and width neither so I must use both tables and divs seems like ...
Like this:
<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

Mixing in table elements with divs is eventually going to give you a headache, especially when it comes to responsive design. For this same issue, I use Bootstrap CSS. They have a grid system that is extremely effective in replacing table-style layouts and adapting to mobile devices. Your target HTML is actually really close to the markup that Bootstrap uses, so your head is obviously int he right place!
After downloading the Bootstrap js and css, I would do something like this:
<!-- 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>

Answer 2

I tried to understand what you are wanting but it wasn't very clear...so this is what I assumed you meant.
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>