how responsive tables

Mental123
(@mental123)

11 years ago

hi
i`m trying to responsive my theme with media queries.
i don`t know how responsive tables i made in my posts
i`m using TinyMCE Advanced plugin for editor and made tables with this plugin

Viewing 3 replies - 1 through 3 (of 3 total)

ics01

(@ics01)

11 years ago

‘ve just worked on this subject.

you can use a page builder (there are some plugins)

but if you want to code a page, here an example below. Type this in the code window of a post :

<style type="text/css">
<!--
div#colonneA {
  width:60%;
  float:left;
  padding-right:20px;
  border-right: #000 1px solid;
}
div#colonneB {
  width:40%;
  float:right;
}
@media screen and (max-width:1040px) {
div#colonneA {
  width:100%;
  float:none;
  background:khaki;
  border-right: 0px;
}
div#colonneB {
  margin-top:20px;
  width:100%;
  float:none;
}
}
-->
</style> 

<div>
  Here, a text that will come 100% of the width.
</div>
<div id="colonneA">
  Here, a text that will be displayed in a left column width 60%.
</div>
<div id="colonneB">
  Here, a text that will be displayed in a left column width 40%.
</div>

This will display the two columns right-left when the wideness of the screen is 1040px or wider, but when it is under 1040px, it will display colonneB block behind colonneA block.

Thread Starter

Mental123

(@mental123)

11 years ago

tnx friend but see,
i make simple tables in my posts with the editor
for example this is one of them

<table style="height: 154px;" width="720">
<tbody>
<tr>
<td>  test suject</td>
<td> test suject</td>
<td>test suject</td>
<td> test suject</td>
</tr>
<tr>
<td> test1</td>
<td> test1</td>
<td>test1</td>
<td> test1</td>
</tr>
<tr>
<td> test2</td>
<td> test2</td>
<td>test2</td>
<td> test2</td>
</tr>
<tr>
<td> test3</td>
<td> test3</td>
<td>test3</td>
<td> test3</td>
</tr>
</tbody>
</table>
&nbsp;

now when i want to responsive my theme for 360p :
@media only screen and (max-width: 360px)
i don`t know what css put in media queries to responsive this table