سؤال

I have a rather simple CSS question.

I want to create a table that follows certain formatting. I want to format several tables differently on the same page.

I have this:

CSS:

table.firstTable
{
    border: 1px solid black;
}
td.firstTable
{
    border: 1px solid black;
}
th.firstTable
{
    border: 1px solid black;
    background: #00003f;
    font-color: #cfffff;
}
table.secondTable
{
    border: 1px solid red;
}
td.secondTable
{
    border: 1px solid red;
    font-family: sans-serif;
}
th.secondTable
{
    border: 1px solid red;
    background: #cfffff;
    font-color: #00003f;
}

The only way I can then create tables this way is something like:

HTML:

<table class="firstTable">
  <tr>
    <th class="firstTable">Item</th>
    <th class="firstTable">Quantity</th>
    <th class="firstTable">Price</th>
  </tr>
  <tr>
    <td class="firstTable">0-001</td>
    <td class="firstTable">Computer</td>
    <td class="firstTable">$299.99</td>
  </tr>
  ...
</table>

<table class="secondTable">
  <tr>
    <th class="secondTable">Customer ID</th>
    <th class="secondTable">Total Sales</th>
  </tr>
  <tr>
    <td class="secondTable">10001</td>
    <td class="secondTable">$39.94</td>
  </tr>
  ...
</table>

I know there's a better way to accomplish this than constantly repeating the "firstTable" and "secondTable" classes.

I tried doing things with like this:

CSS:

#firstTable table
{
    border: 1px solid black;
}
#firstTable th
...

and then

HTML:

<div id="firstTable">
<table>
...
</table>
</div>

but it didn't work.

What am I missing?

لا يوجد حل صحيح

نصائح أخرى

You should look more in to selectors (this is pretty basic CSS).

You can select an element inside a element with a class using element.withClass element. That way you don't need to give all the td and th a class, but only the parent element, the table in this case:

HTML:

<table class="firstTable">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>0-001</td>
    <td>Computer</td>
    <td>$299.99</td>
  </tr>
  ...
</table>

<table class="secondTable">
  <tr>
    <th>Customer ID</th>
    <th>Total Sales</th>
  </tr>
  <tr>
    <td>10001</td>
    <td>$39.94</td>
  </tr>
  ...
</table>

CSS:

.firstTable
{
    border: 1px solid black;
}
.firstTable td
{
    border: 1px solid black;
}
.firstTable th
{
    border: 1px solid black;
    background: #00003f;
    color: #cfffff;
}
.secondTable
{
    border: 1px solid red;
}
.secondTable td
{
    border: 1px solid red;
    font-family: sans-serif;
}
.secondTable th
{
    border: 1px solid red;
    background: #cfffff;
    color: #00003f;
}

And a demo

PS: font-color isn't a CSS attribute, it should be just color

I think what you are looking for is the CSS3 nth-of-type selector.

CSS:

table:nth-of-type(odd) {
    border: 1px solid black;
}
table:nth-of-type(odd) td {
    border: 1px solid black;
}

This should allow you to select even and odd tables like the example here

Note that this won't work in older versions of IE (8 and below) but you should be able to work around that using https://stackoverflow.com/a/4742560/3387154

would this not work?

.firstTable th td
{
border: 1px solid black;
}

.firstTable th
{
background: #00003f;
color: #cfffff;
}

.secondTable
{
border: 1px solid red;
}

.secondTable th
{
background: #cfffff;
color: #00003f;
}

.secondTable td
{
font-family: sans-serif;
}

<table class="firstTable">
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>0-001</td>
<td>Computer</td>
<td>$299.99</td>
</tr>
</table>

<table class="secondTable">
<tr>
<th>Customer ID</th>
<th>Total Sales</th>
</tr>
<tr>
<td>10001</td>
<td>$39.94</td>
</tr>
</table>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top