如何将样式类应用于 td 元素？答案

【问题标题】：How to apply style classes to td elements?如何将样式类应用于 td 元素？
【发布时间】：2011-03-15 12:45:13
【问题描述】：

我试图找出正确的语法，以便在下表中为每个 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 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 元素等。我尝试了几件事，但似乎无法得到它工作！

【问题讨论】：

如果您的问题与 php 有关，则发布的代码很好。如果涉及到 css/html，请显示浏览器看到的渲染 html：<?php ... ?> 服务器端脚本与 CSS 无关。

标签： html css

【解决方案1】：

给表一个类名，然后使用以下内容定位td：

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

【讨论】：

嗨，这对字体很有用，但由于某种原因，我无法在 th 或 td 元素上使用 margin-left 让列更间隔开。
@moleculezz 不确定你是否还来这里，但如果是的话，为什么要使用 class 而不是 id？
@Ryan 最佳实践建议使用类名而不是 ID。在网上搜索一下，你会发现很多关于它的信息。

【解决方案2】：

如果我没记错的话，您应用于table 的一些CSS 属性没有按预期继承。因此，您确实应该将样式直接应用于td、tr 和th 元素。

如果您需要为每列添加样式，请使用表格中的 <col> 元素。

在此处查看示例：https://jsfiddle.net/GlauberRocha/xkuRA/2/

注意：margin 不能包含在 td 中。请改用padding。

【讨论】：

嗨，shows 是表格所在的整个类的名称，# 已被网站删除，因此它应该以该符号开头。
这更像是一个评论而不是答案。

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

您可以使用:first-child、:nth-child(N) 和:last-child 伪类。

它们根据元素在一组兄弟中的位置来匹配元素。在你的情况下：

table td:first-child  { /* 1st element */ }
table td:nth-child(2) { /* 2nd element */ }
table td:nth-child(3) { /* 3rd element */ }
table td:last-child   { /* 4th element */ }

文档：

【讨论】：

【解决方案5】：

定位 td 的更明确的方法是 table tr td { }

【讨论】：

感谢您的所有回复，我从中学到了很多，我发现 cellspacing 是要走的路，但似乎您只能将其添加到表声明本身而不是 css 文件中?
是的，因为cellspacing 是 HTML 属性，而不是 CSS 属性。但是你应该能够使用 CSS 实现你想要的（参见border-collapse、border-spacing...）。

【解决方案6】：

只需创建一个类名并在其中定义您的样式，如下所示：

table.tdfont td {
  font-size: 0.9em;
}

【讨论】：

【解决方案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;
}

为了一致的字体大小和更大的标题。

【讨论】：