View Single Post
Old 08-03-2013, 06:08 PM   #2
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,799
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by phossler View Post
Most of the stuf I do is pretty streight forward, but now I think I have to use a table to keep things arranged.

I did a simple 3x3 test (attached) and css picked up from cssschools.com, but I'm missing something


What I'd like ...

1. entire table centered on page, with maybe 10% margins left and right

2. 3px solid bottom border below header row

3. 1px dotted border between each data row

4. some way to specify the width (by percent??) for each of the columns, 25%, 25%. 50%

...

So if someone (or someones) can offer a little guidence I'd appreciate it. As always, suggestions are ALWAYS welcome

Thanks

Paul
Something like this:

Code:
table {
    width: 90%;
    margin-left: 5%;
    text-align: center;
    border: 3px solid black;
    border-collapse: collapse;
}

th {
    font-style: italic;
    height: 3em;
    vertical-align: middle;
    padding: 5px;
    border-bottom: 3px solid black;
    background-color: #8fbc8f;
}

tr {
    margin-top: 1em;
    margin-bottom: 1em;
    height: 2em;
}

tr:nth-child(even) { /* this selector doesn't work in ADE */
    background-color: #BDE1BD;
}

tr:nth-child(odd) { /* this selector doesn't work in ADE */
    background-color: #F0FFF0;
}

td {
   padding: 5px;
   border-bottom: 1px solid black;
}

td.first, td.second {
   width: 25%; /* width of the first and second columns */
}

td.third {
   width: 50%; /* width of the third column */
}
And in the .html file:

Code:
<table>
  <thead>
      <tr>
        <th colspan="3">FIRST ROW</th>
      </tr>
  </thead>

  <tbody>
     <tr>
        <td class="first">1</td>

        <td class="second">2</td>

        <td class="third">3</td>
     </tr>

     <tr>
        <td>4</td>

        <td>5</td>

        <td>6</td>
     </tr>

     <tr>
        <td>7</td>

        <td>8</td>

        <td>9</td>
     </tr>

     <tr>
        <td>10</td>

        <td>11</td>

        <td>12</td>
     </tr>
  </tbody>
</table>
Below you can see a screenshot of my Kindle and Sigil and the respective epub.

Regards
Rubén
Attached Thumbnails
Click image for larger version

Name:	screen_shot-9259.gif
Views:	601
Size:	6.6 KB
ID:	108873   Click image for larger version

Name:	Table.jpg
Views:	689
Size:	58.3 KB
ID:	108875  
Attached Files
File Type: epub Table.epub (2.4 KB, 424 views)

Last edited by RbnJrg; 08-03-2013 at 06:12 PM.
RbnJrg is online now   Reply With Quote