Quote:
Originally Posted by phossler
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