CSS problem: table-design

[FrankJH]

Dear all,

I hope my question doesn't appear too stupid to you - but I'm not an expert with
css, and I have not found an answer on google.

I designed a table for my epub in css via

table.DeclensionTable {
  background-color: #FFF;
  width: 60%;
  text-align: left;
  border: none;
  border-collapse: collapse;
  margin-right: auto;
  margin-left: 50px;
}

When I use the table, I'd like to have diffternt table widths - here's what I did

<table class="DeclensionTable" style="width: 80%">

It works, but I don't think it's good css practice, isn't it?

The length is variable here, can be 80%, 90% or whatever ...

Is there a better way to achieve this?

Best wishes, Frank

[phossler]

FWIW, I've always found Tables to be tricky so I made my CSS as simple as i could

Sometimes inline CSS and sometimes CSS classes

Here's just my example for both, with

<td style="width: 35%">

the inline and

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

the clsss

Spoiler:

table {
width: 60%;
margin-left: 15%;
margin-right: 15%;
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;
}

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

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

td.first, td.second {
width: 15%;
}

td.third {
width: 25%;
}

Using

Spoiler:

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

<tbody>
<tr>
<td style="width: 35%">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>

Just some things to consider

[FrankJH]

Originally Posted by phossler

FWIW, I've always found Tables to be tricky so I made my CSS as simple as i could

Agree completely with this

While reading your answer, I had the following idea:

<table class="DeclensionTable SmallTable" style="width: 80%">

Then the width-percentage "SmallTable" can be indicated in the css.

Thanks for answering!

[hobnail]

Having a style= and a class= seems odd to me but here's what I tried just now which worked but which you may find odd. To be honest any style= on a tag is a bad smell for me.

In the css for the table, set its width to 100%;

table {
    width: 100%;
}

Then make classes for the different widths;

.tablebig {
    width: 80%;
}

.tablesmall {
    width: 40%;
}

Then put the table inside a div with either of those classes;

  <div class="tablesmall">
    <table>
    ...

I have no idea how portable that is.

[phossler]

@hobnail --

That's sort of the way I do it in my CSS - first spoiler in post #2.

You're right that it's not very portable: different tables in same epub might have different column widths, each epub need to be tweaked, etc.

[hobnail]

Originally Posted by phossler

@hobnail --

That's sort of the way I do it in my CSS - first spoiler in post #2.

You're right that it's not very portable: different tables in same epub might have different column widths, each epub need to be tweaked, etc.

Yes, just get rid of the div and put the classes on the table.

[FrankJH]

Sorry, that was my mistake.

Here's what I meant:

<table class="DeclensionTable SmallTable">

The appearance is controlled by the first class, the size by the second ...

For my purposes, it is a satisfying solution.

Thank you very much for your help!

[hobnail]

Originally Posted by FrankJH

Sorry, that was my mistake.

Here's what I meant:

<table class="DeclensionTable SmallTable">

The appearance is controlled by the first class, the size by the second ...

For my purposes, it is a satisfying solution.

Thank you very much for your help!

Yes, I use something similar. I have a "block" div that is generic for setting things off from the paragraphs:

div.block {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    width: 85%;
}

Then for the specific types of blocks I have additional classes:

div.article {
    font-family: sans-serif;
}


div.letter p {
    font-style: italic;
    hyphens: none;
}

And then combine them like you're doing:

<div class="block letter">

I don't remember the details but the p after div.letter is needed because the font-style doesn't propagate to the paragraphs in a div and needs to be specified for the paragraphs within the div. Whereas the font-family does propagate down into the paragraphs within the div.