Problem with tables

[DanaRu]

Hello!
I have little experience in creating e-books. I really need advice
I do e-books for mobile applications and readers in sigil in epub format.
Problem with tables ... how to make it so that the tables are displayed normally? in the photo are examples of tables in mobile applications
I tried to set the size of the columns, but it does not help.
I also tried to add a scroll, but it doesn't work everywhere ..
Maybe i am doing something wrong
Please, help

table
{
font-size: 0.8em;
margin-bottom: 2em;
border: 1px solid black;
text-indent: 0em;
width: 100%;
max-width:100%;
border-collapse: collapse;
table-layout:fixed;
text-align: left;
height: 100%;
margin: auto;
}
td
{
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
border: 1px solid black;
padding: 10px;
}
@media only screen and (max-width: 480px)
{
.tablemobile
{
overflow-x: auto;
display: block;
overflow-y: auto;
}

[RbnJrg]

Please, could you post also the .html code that are you using with your tables? There are some css properties you are using not very suitable for tables but I can't give a more accurate opinion until seeing your html code.

[DanaRu]

Originally Posted by RbnJrg

Please, could you post also the .html code that are you using with your tables? There are some css properties you are using not very suitable for tables but I can't give a more accurate opinion until seeing your html code.

Yes of course!
For example, here is a large table. In the mobile application, it is poorly displayed.

<table class="tablemobile">
<caption>Компоненты и проблемы поддержки детей с ОВЗ и их семей</caption>
<tbody>
<tr>
<td class="center">
<strong>Компоненты </strong>
</td>
<td class="center">
<strong>Проблемы </strong>
</td>
<td class="center">
<strong>Фокусы</strong>
</td>
<td class="center">
<strong>Техники поддержки</strong>
</td>
</tr>
<tr>
<td>
Диагностика
</td>
<td rowspan="3">
отношений с собой
<br/><br/><br/>с миром
</td>
<td>
пассивное отношение семьи к жизни и к проблемам (болезни) ребенка
</td>
<td>
развенчание иллюзий «нормальности» нарушений в отношениях, поведении и переживаниях ребенка и других членов семьи в противовес необходимости постоянной заботы о ее развитии, активных и комплексных, постоянных действий и усилий
</td>
</tr>
<tr>
<td>
Коррекция
</td>
<td rowspan="2">
негативное отношение к жизни, в том числе депрессивные установки и состояния
</td>
<td rowspan="2">
использование техники процедур переформулирования (позитивное переосмысление и т. д.), преодоления логических искажений (сверхобобщения, катастрофизации или преуменьшения значимости) в базисных посылках (стереотипах осмысления своей жизни) родителей и детей
</td>
</tr>
<tr>
<td>
Мониторинг
</td>
</tr>
<tr>
<td>
Реабилитация
</td>
<td rowspan="3">
отношений с членами семьи
<br/><br/><br/>с ребенком
</td>
<td>
позитивное – «рентное» отношение к жизни и болезням (проблемам) ребенка
</td>
<td>
помощь семье в направлении обнаружения и развенчания ее «фиктивных целей», их ниспровержения и замены «реальными» целями
</td>
</tr>
<tr>
<td>
Диагностика
</td>
<td rowspan="2">
синдром хронической усталости и
«автономные» проблемы родителя(ей)
</td>
<td rowspan="2">
помощь в развитии позитивного самоотношения и принятия ситуации как «жизненного вызова», анализ «развивающих возможностей» детского присутствия
</td>
</tr>
<tr>
<td>
Профилактика
</td>
</tr>
<tr>
<td>
Развитие
</td>
<td rowspan="2">
отношений с родительской семьей
со специалистами
</td>
<td>
осмысление болезней и иных проблем в развитии и отношениях ребенка как «наказания», чувство вины
</td>
<td>
помощь в разработке представлений о вине в направлении поиска иррациональных предубеждений, психогенетический анализ, психодраматические розыгрыши и «семейные расстановки», «целеориентированная» трансформация проблемных ситуаций
</td>
</tr>
<tr>
<td>
Сопровождение и реабилитация
</td>
<td>
проблемы частичного принятия ребенка и чувства вины по поводу непринятия ребенка
</td>
<td>
«терапия реальностью», помощь в осмыслении невозможности полного принятия, а также позитивных функций непринятия в развитии ребенка и семьи
</td>
</tr>
</tbody>
</table>

[RbnJrg]

Thanks! Last questions:

1) Are you working with epub2 or epub3?
2) You are seeking a code fully compatible with ADE?

By the way, I opened your table without css properties in Sigil and it displays quite well

[RbnJrg]

Hi Dana;

Well, it seems that you didn't make the things so bad after all . After using this .html code (your code):

Spoiler:

  <table class="tablemobile">
    <caption>Компоненты и проблемы поддержки детей с ОВЗ и их семей</caption>

    <tbody>
      <tr>
        <td class="center">
          <strong>Компоненты </strong>
        </td>

        <td class="center">
          <strong>Проблемы </strong>
        </td>

        <td class="center">
          <strong>Фокусы</strong>
        </td>

        <td class="center">
          <strong>Техники поддержки</strong>
        </td>
      </tr>

      <tr>
        <td>
          Диагностика
        </td>

        <td rowspan="3">
          отношений с собой
          <br/>

          <br/>

          <br/>

          с миром
        </td>

        <td>
          пассивное отношение семьи к жизни и к проблемам (болезни) ребенка
        </td>

        <td>
          развенчание иллюзий «нормальности» нарушений в отношениях, поведении и переживаниях ребенка и других членов семьи в противовес необходимости постоянной заботы о ее развитии, активных и комплексных, постоянных действий и усилий
        </td>
      </tr>

      <tr>
        <td>
          Коррекция
        </td>

        <td rowspan="2">
          негативное отношение к жизни, в том числе депрессивные установки и состояния
        </td>

        <td rowspan="2">
          использование техники процедур переформулирования (позитивное переосмысление и т. д.), преодоления логических искажений (сверхобобщения, катастрофизации или преуменьшения значимости) в базисных посылках (стереотипах осмысления своей жизни) родителей и детей
        </td>
      </tr>

      <tr>
        <td>
          Мониторинг
        </td>
      </tr>

      <tr>
        <td>
          Реабилитация
        </td>

        <td rowspan="3">
          отношений с членами семьи
          <br/>

          <br/>

          <br/>

          с ребенком
        </td>

        <td>
          позитивное – «рентное» отношение к жизни и болезням (проблемам) ребенка
        </td>

        <td>
          помощь семье в направлении обнаружения и развенчания ее «фиктивных целей», их ниспровержения и замены «реальными» целями
        </td>
      </tr>

      <tr>
        <td>
          Диагностика
        </td>

        <td rowspan="2">
          синдром хронической усталости и
«автономные» проблемы родителя(ей)
        </td>

        <td rowspan="2">
          помощь в развитии позитивного самоотношения и принятия ситуации как «жизненного вызова», анализ «развивающих возможностей» детского присутствия
        </td>
      </tr>

      <tr>
        <td>
          Профилактика
        </td>
      </tr>

      <tr>
        <td>
          Развитие
        </td>

        <td rowspan="2">
          отношений с родительской семьей
со специалистами
        </td>

        <td>
          осмысление болезней и иных проблем в развитии и отношениях ребенка как «наказания», чувство вины
        </td>

        <td>
          помощь в разработке представлений о вине в направлении поиска иррациональных предубеждений, психогенетический анализ, психодраматические розыгрыши и «семейные расстановки», «целеориентированная» трансформация проблемных ситуаций
        </td>
      </tr>

      <tr>
        <td>
          Сопровождение и реабилитация
        </td>

        <td>
          проблемы частичного принятия ребенка и чувства вины по поводу непринятия ребенка
        </td>

        <td>
          «терапия реальностью», помощь в осмыслении невозможности полного принятия, а также позитивных функций непринятия в развитии ребенка и семьи
        </td>
      </tr>
    </tbody>
  </table>

and these .css properties:

table {
  font-size: 0.8em;
  margin-bottom: 2em;
  border: 1px solid black;
  text-indent: 0;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

td {
  border: 1px solid black;
  padding: 10px;
}

.center {
  text-indent: 0;
  text-align: center;
}

I had this output under ADE 4.5:

With small font (Two pages view)

With medium font

With small windows

So, your table displays very well under ADE. What e-readers are showing poorly your table?

Below you can check the respective epub (epub2).

Regards
Rubén

[DanaRu]

Originally Posted by RbnJrg

Thanks! Last questions:

1) Are you working with epub2 or epub3?
2) You are seeking a code fully compatible with ADE?

By the way, I opened your table without css properties in Sigil and it displays quite well

1) I don't know, I just started working with it (( how to find out?
2) I think yes

Yes, everything is good in sigil, but on the phone it is not very good (you can see on the photo above)

Can I have another question, please? Can I use some styles in html or is it important to write all styles in css?

[DanaRu]

Originally Posted by RbnJrg

Hi Dana;

Well, it seems that you didn't make the things so bad after all . After using this .html code (your code):

Spoiler:

  <table class="tablemobile">
    <caption>Компоненты и проблемы поддержки детей с ОВЗ и их семей</caption>

    <tbody>
      <tr>
        <td class="center">
          <strong>Компоненты </strong>
        </td>

        <td class="center">
          <strong>Проблемы </strong>
        </td>

        <td class="center">
          <strong>Фокусы</strong>
        </td>

        <td class="center">
          <strong>Техники поддержки</strong>
        </td>
      </tr>

      <tr>
        <td>
          Диагностика
        </td>

        <td rowspan="3">
          отношений с собой
          <br/>

          <br/>

          <br/>

          с миром
        </td>

        <td>
          пассивное отношение семьи к жизни и к проблемам (болезни) ребенка
        </td>

        <td>
          развенчание иллюзий «нормальности» нарушений в отношениях, поведении и переживаниях ребенка и других членов семьи в противовес необходимости постоянной заботы о ее развитии, активных и комплексных, постоянных действий и усилий
        </td>
      </tr>

      <tr>
        <td>
          Коррекция
        </td>

        <td rowspan="2">
          негативное отношение к жизни, в том числе депрессивные установки и состояния
        </td>

        <td rowspan="2">
          использование техники процедур переформулирования (позитивное переосмысление и т. д.), преодоления логических искажений (сверхобобщения, катастрофизации или преуменьшения значимости) в базисных посылках (стереотипах осмысления своей жизни) родителей и детей
        </td>
      </tr>

      <tr>
        <td>
          Мониторинг
        </td>
      </tr>

      <tr>
        <td>
          Реабилитация
        </td>

        <td rowspan="3">
          отношений с членами семьи
          <br/>

          <br/>

          <br/>

          с ребенком
        </td>

        <td>
          позитивное – «рентное» отношение к жизни и болезням (проблемам) ребенка
        </td>

        <td>
          помощь семье в направлении обнаружения и развенчания ее «фиктивных целей», их ниспровержения и замены «реальными» целями
        </td>
      </tr>

      <tr>
        <td>
          Диагностика
        </td>

        <td rowspan="2">
          синдром хронической усталости и
«автономные» проблемы родителя(ей)
        </td>

        <td rowspan="2">
          помощь в развитии позитивного самоотношения и принятия ситуации как «жизненного вызова», анализ «развивающих возможностей» детского присутствия
        </td>
      </tr>

      <tr>
        <td>
          Профилактика
        </td>
      </tr>

      <tr>
        <td>
          Развитие
        </td>

        <td rowspan="2">
          отношений с родительской семьей
со специалистами
        </td>

        <td>
          осмысление болезней и иных проблем в развитии и отношениях ребенка как «наказания», чувство вины
        </td>

        <td>
          помощь в разработке представлений о вине в направлении поиска иррациональных предубеждений, психогенетический анализ, психодраматические розыгрыши и «семейные расстановки», «целеориентированная» трансформация проблемных ситуаций
        </td>
      </tr>

      <tr>
        <td>
          Сопровождение и реабилитация
        </td>

        <td>
          проблемы частичного принятия ребенка и чувства вины по поводу непринятия ребенка
        </td>

        <td>
          «терапия реальностью», помощь в осмыслении невозможности полного принятия, а также позитивных функций непринятия в развитии ребенка и семьи
        </td>
      </tr>
    </tbody>
  </table>

and these .css properties:

table {
  font-size: 0.8em;
  margin-bottom: 2em;
  border: 1px solid black;
  text-indent: 0;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

td {
  border: 1px solid black;
  padding: 10px;
}

.center {
  text-indent: 0;
  text-align: center;
}

I had this output under ADE 4.5:

Attachment 170718 With small font (Two pages view)

Attachment 170719 With medium font

Attachment 170720 Attachment 170721 With small windows

So, your table displays very well under ADE. What e-readers are showing poorly your table?

Below you can check the respective epub (epub2).

Regards
Rubén

thank you very much!))

yes, it looks good

[RbnJrg]

Originally Posted by DanaRu

Yes, everything is good in sigil, but on the phone it is not very good (you can see on the photo above)

Very probably the issue is in the app, not in the code to handle the table. Use PocketBook for Android; it's one of the better to show epubs.

Can I have another question, please? Can I use some styles in html or is it important to write all styles in css?

You can use styles in html but the better is to write all styles in css because it's easier to make changes and fix errors.

[DanaRu]

Originally Posted by RbnJrg

Very probably the issue is in the app, not in the code to handle the table. Use PocketBook for Android; it's one of the better to show epubs.



You can use styles in html but the better is to write all styles in css because it's easier to make changes and fix errors.

Muchas gracias Rubén!!
Un abrazo)
amor América del Sur

[DanaRu]

one more question I do not have an iPhone to check. Do I need special settings for them?

[RbnJrg]

Originally Posted by DanaRu

one more question I do not have an iPhone to check. Do I need special settings for them?

No, you don't. If you are thinking in an epub for iPhone, if the ebook displays well in ADE, it should displays also well in iPhone. Maybe if you think to include images in tables you should "tweak" a bit the code in order the images look well under iPad/iPhone but if you only are going to include text, then don't worry . Take in count that ADE is the standart for epubs; if your ebooks look well in ADE, then is not your fault if the ebooks don't look so well in some applications (the fault is the app's). The table you posted with the simple css styles of my previous post works fine, so do the same with your others tables and all will go good

Muchas gracias Rubén!!
Un abrazo)
amor América del Sur

очень мило с твоей стороны Дана и еще одно объятие для вас

[DanaRu]

Originally Posted by RbnJrg

No, you don't. If you are thinking in an epub for iPhone, if the ebook displays well in ADE, it should displays also well in iPhone. Maybe if you think to include images in tables you should "tweak" a bit the code in order the images look well under iPad/iPhone but if you only are going to include text, then don't worry . Take in count that ADE is the standart for epubs; if your ebooks look well in ADE, then is not your fault if the ebooks don't look so well in some applications (the fault is the app's). The table you posted with the simple css styles of my previous post works fine, so do the same with your others tables and all will go good

thanks for the detailed answer
Tell me, please, what should I do for the photo?

Originally Posted by RbnJrg

очень мило с твоей стороны Дана и еще одно объятие для вас

[DanaRu]

Originally Posted by RbnJrg

Take in count that ADE is the standart for epubs;

This is Adobe Digital Editions right?

[DanaRu]

[RbnJrg]

Originally Posted by DanaRu

This is Adobe Digital Editions right?

Yes, it is.