Как применять классы стиля к классам td?

то, что я пытаюсь выяснить, является правильным синтаксисом для применения некоторого стиля к каждому отдельному td в моей таблице ниже:

<section id="shows">
<!-- HTML5 section tag for the shows 'section' -->

<h2 class="gig">Shows</h2>

<ul class="gig">

    <!-- Start the table -->
    <table>
        <tr>
            <!-- Setup the header row -->
            <th>When</th>
            <th>Where</th>
            <th>Start</th>
            <th>Finish</th>
        </tr>

        <?php
            // some PHP to fetch all the gig entries from the shows table
            $shows_query = "SELECT * FROM shows ORDER BY date ASC";
            $shows = mysql_query($shows_query);
            // a loop to place all the values in the appropriate table cells
            while ($show = mysql_fetch_array($shows)){
            //begin the loop...
            ?>

        <!-- Start the row -->
        <tr>

            <!-- Format the date value from the database and print it: -->
            <td class="when"><?php 
            $date = date("l, F j, Y", strtotime($show['date'])); 
            echo "$date";
            ?></td>

            <td class="venue"><?php
            echo $show['venue'];
            ?></td>

            <!-- Format the the start and end times and print them: -->
            <td class="start"><?php
            $time = date("G:i", strtotime($show['time'])); 
            echo "$time";
            ?></td>

            <td class="finish"><?php
            $until = date("G:i", strtotime($show['until']));
            echo "$until";
            ?></td>

            <!-- Finish this row -->
        </tr>

        <!-- Some space before the next row -->
        <div class="clear"></div>

        <?php 
            // close the loop:
             }
             ?>
        <!-- Finish the table -->
    </table>
</ul>

</section>

Стиль, который у меня есть на данный момент:

#shows table.gig { font-size: 25px; }
#shows td.finish { margin-left: 50px;}

У меня был класс для самой таблицы, но не уверен, что это необходимо.

Размер шрифта работает, но я не могу понять, как применить стиль к элементам td, th, tr и т.д. Я пробовал несколько вещей, но не могу заставить его работать!

Любая помощь очень ценится.

Спасибо.

Ответ 1

Дайте таблице имя класса, а затем задайте td следующим образом:

table.classname td {
    font-size: 90%;
}

Ответ 2

Если я хорошо помню, некоторые свойства CSS, которые вы применяете к table, не наследуются, как ожидалось. Поэтому вы действительно должны применять стиль непосредственно к элементам td, tr и th.

Если вам нужно добавить стиль в каждый столбец, используйте элемент <col> в своей таблице.

См. пример здесь: http://jsfiddle.net/GlauberRocha/xkuRA/2/

Примечание. Вы не можете иметь margin в td. Вместо этого используйте padding.

Ответ 3

Вы можете использовать: nth-child (N) CSS-селектор, например:

table td:first-child {}  //1
table td:nth-child(2) {} //2
table td:nth-child(3) {} //3
table td:last-child {}   //4

Ответ 4

Попробуйте это

table tr td.classname
{
 text-align:right;
 padding-right:18%;
}

Ответ 5

Более конкретный способ нацеливания на td: table tr td { }

Ответ 6

table.classname td {
    font-size: 90%;
}

работал у меня. спасибо.

Ответ 7

При использовании с реактивной загрузочной таблицей я не обнаружил, что

table.classname td {

Синтаксис

работал, поскольку не было тега <table>. Часто такие модули не используют внешний тег, а просто погружаются прямо, возможно, используя <thead> и <tbody> для группировки не более.

Простое задание вроде этого отлично поработало, хотя

td.classname {
    max-width: 500px;
    text-overflow: initial;
    white-space: wrap;
    word-wrap: break-word;
}

поскольку он непосредственно переопределяет <td> и может использоваться только для элементов, которые вы хотите изменить. Возможно, в вашем случае используйте

thead.medium td {
  font-size: 40px; 
}
tbody.small td {
  font-size:25px;
}

для согласованного размера шрифта с большим заголовком.

Ответ 8

Просто создайте имя класса и определите свой стиль. Вот как это:

table.tdfont td {

размер шрифта: 0.9em; }