IOS Chrome tables do not render block even with declared ad
My tables and everything inside are display: block
deprecated in iOS Chrome (V. 39.9.2171.50) despite what I have declared <!DOCTYPE html>
.
Here's the thing: tables render fine on desktop Chrome. And, on another site I was working on, tables work fine on iOS Chrome. I've checked several times - no styles clash (otherwise they should create problems in desktop browsers as well). Even with inline styles, tables and their child table elements are still rendered using user-defined styles. I'm at a loss. Can anyone find out something aside from the doctype that the web kit will use by default for user agent styles in tables?
EDIT:
<table class="test-table" style="display: block">
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
<td> Cell 3 </td>
</tr>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
<td> Cell 3 </td>
</tr>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
<td> Cell 3 </td>
</tr>
</tbody>
</table>
<style>
.test-table, tbody, tr, td {
display: block
}
</style>
<script>
(function($){
alert($('.text-table').css('display')); // outputs: table;
})(jQuery)
</script>
source to share
The class is called "test-table" in html and css, but in js you are using "text table". Is this just a typo in the example?
Alternatively, you can work with an assertion! important in your css, for example:
.test-table, tbody, tr, td {
display: block !important;
}
Another idea I have is to style the table object directly instead of a class, for example:
table, tbody, tr, td {
display: block !important;
}
Let me know if some of them helped.;)
source to share