Skip to content

Table rendering issues #67

@NuclearCookie

Description

@NuclearCookie

I have some big issues with rendering tables.

I use this code to display a table:

<style type="text/css" media="screen">
    body {
      background-color: black;
    }

  .text_container {
    position: absolute;
    height: 80%;
    width: 90%;
    left:5%;
    top: 10%;
    display: table;
    background-image: url('../images/box_leaderboard.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: solid;
    border-width: 2px;
  }

  .container_left_text {
    display: table-row;
    vertical-align: middle;
    z-index: 0;
    border: solid;
    border-width: 2px;
  }

  .text_left {
    display: table-column;
    text-align: left;
    font-size: 2em;
    font-family: sansation-regular;
    vertical-align: middle;
    color: white;
    padding-left: 1%;
    width: 50%;
    border: solid;
    border-width: 2px;
  }

  .text_right {
    display: table-column;
    text-align: right;
    font-size: 2em;
    font-family: sansation-regular;
    vertical-align: middle;
    color: white;
    padding-right: 2%;
    width: 50%;
    border: solid;
    border-width: 2px;
  }
</style>

<body>
  <table class="text_container">
    <tr></tr> <!-- Empty tr so we can hide all others -->
    <tr class="container_left_text" id="parent0">
      <td class="text_left" id="title0">Test
      </td>
      <td class="text_right" id="value0">Test
      </td>
    </tr>
    <tr class="container_left_text" id="parent1">
      <td class="text_left" id="title1">Test
      </td>
      <td class="text_right" id="value1">Test
      </td>
    </tr>
    <tr class="container_left_text" id="parent2" >
      <td class="text_left" id="title2">Test
      </td>
      <td class="text_right" id="value2">Test
      </td>
    </tr>
    <tr class="container_left_text" id="parent3">
      <td class="text_left" id="title3">Test
      </td>
      <td class="text_right" id="value3">Test
      </td>
    </tr>
</table>
</body>

It is rendered quite wrong in litebrowser with the latest litehtml code.

Besides that, if I resize the window ( re - render ), it looks like my <td> elements are moved down, so there is something being summed...

Also I noticed that in my implementation, if I added float: left and float: right properties to .text_left and .text_right respectively, the rendering would become extremely slow. I did not test this in litebrowser though.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions