View Single Post
Old 07-11-2013, 05:35 PM   #5
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,853
Karma: 8821117
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by holdit View Post
...How do I center the table and it's contents?
Try using the following styles in your css stylesheet:

Code:
div.tab {
   display: block;
   width: 60%; /* here use the width you want */
   height: auto; /* Important: don't forget this property */
   margin-left: 20%;
}

table {
   width: 100%;
   text-align: center;
   border: 5px solid black;
}

td {
   margin: 0;
   padding: 0;
   text-indent: 0;
   text-align: center;
}
And in your .html sheet write:

Code:
<div class="tab">
    <table>
      <thead>
        <tr>
          <th>Lorem ipsum dolor sit amet</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Nulla ac tellus nunc</td>
        </tr>

        <tr>
          <td>Phasellus imperdiet leo metus</td>
        </tr>

        <tr>
          <td>Donec metus ligula</td>
        </tr>

        <tr>
          <td>Etiam lobortis, massa ac aliquam auctor</td>
        </tr>
      </tbody>
    </table>
  </div>
This is a workaround for ADE and readers based on ADE, otherwise is not neccesary to include the table inside a "div" block. As you can see, the trick is not to center the table but the "div block" Once centered the "div block", we can fill it with the table.

To center the "div block" we need to fix a width for it (what you want) and after that to set a margin-left according to the width. This left margin must be equal to:

(100% - block width %) / 2

In the above example we have:

(100% - 60%) / 2 = 20%

Regards
Rubén
Attached Thumbnails
Click image for larger version

Name:	Image1.jpg
Views:	141
Size:	36.9 KB
ID:	108135  
Attached Files
File Type: epub Centered Table.epub (2.3 KB, 133 views)

Last edited by RbnJrg; 07-11-2013 at 05:37 PM.
RbnJrg is online now   Reply With Quote