CSS 表格元素答案

【问题标题】：CSS Table ElementsCSS 表格元素
【发布时间】：2014-04-17 00:03:09
【问题描述】：

我继承了一些网页更新的责任，并且必须在现有设计的参数范围内工作，但使用的编码是所有表格，每个表格单元格中都有很多格式。我只是想解决它就头疼。我想通过使用样式来简化，并且需要有几种不同的样式。具体来说，表格标题都是粗体、居中和一种字体大小，因此它将获得一种样式的行。第一列需要加粗并居中，第五列居中（但常规字体粗细）。所有其他列都是左对齐和常规权重。这些行在白色和彩色之间交替。

所以我的问题是我可以设置两种样式的行以更改颜色，然后我将如何设置需要加粗和/或居中的 2 列的样式，或者我是否需要设置每个单元格的样式才能做到这一点工作吗？

<tr style="height: 27.75pt">
        <td style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d2eaf1; padding-bottom: 0in; border-left: #78c0d4 1pt solid; width: 41.4pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="55">
            <p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
                <strong><span style="font-size: 10pt; color: black; font-family: 'Tahoma','sans-serif'">2</span></strong></p>
        </td>
        <td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 137.8pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="184">
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Grace Episcopal Church</span></p>
        </td>
        <td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 72.45pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="97">
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Nyack</span></p>
        </td>
        <td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 96.85pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="129">
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">John Smith</span></p>
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Tom Jones&nbsp;</span></p>
        </td>
        <td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 63pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="84">
            <p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">222-1234</span></p>
            <p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
                <span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">333-6789</span></p>
        </td>
        <td style="border-right: #78c0d4 1pt solid; padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 147.4pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt" valign="top" width="197">
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <a href="mailto:johnsmith@optonline.net"><span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">johnsmith@optonline.net</span></a></p>
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <a href="mailto:tomjones@att.net"><u><span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">tomjones@att.net&nbsp;</span></u></a></p>
        </td>
    </tr>

我已经用内部样式表清理了大部分代码，但还有两个问题。每列的宽度不会使用每个列类中的宽度样式更改。此外，当我将字体大小从 11pt 更改为 12 pt 时，它会将文本包含在两列中，从而偏离了表格的预期设计。我确定我在这一点上错过了一个相当简单的调整。

如果重要的话，我正在使用一个拥有自己所见即所得前端的网站，并且我对源代码的访问权限有限 - 我可以进行一些更改，但不能完全控制，但这就是我一直坚持的工作。

<style type="text/css">
.tablestyle {
border: #78c0d4 1pt solid;
cellpadding:none;
cellspacing: none;
border: medium none; 
border-collapse: collapse;
width: 740;
    table-layout: fixed;
}

#heading {
text-align:center;
line-height:normal;
font-size:26px;
font-family: Arial, Helvetica, sans-serif;
color:#252525;
}

.tablerowblue {
border: #78c0d4 1pt solid; 
background: #d2eaf1; 
border-right-color: #f0f0f0; 
vertical-align:top;
line-height: normal; 
font-size: 12px; 
color: black; 
font-family: Arial, Helvetica, sans-serif;
}

.tablerowwhite {
border: #78c0d4 1pt solid; 
background: #ffffff; 
vertical-align:top;
line-height: normal; 
font-size: 12px; 
color: black; 
font-family: Arial, Helvetica, sans-serif;
}

.tableheadbold {
padding: 0 5px; 
border: #78c0d4 1pt solid; 
background: #4bacc6; 
border-right-color: #f0f0f0; 
vertical-align:top;
text-align: center;
font-size: 12px; 
color: black; 
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}

.col1 {
width: 40;
font-weight:bold;
text-align:center;
border: #78c0d4 1pt solid;
}
.col2 {
width:80;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col3 {
width:70;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col4 {
width:170;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col5 {
width:140;
text-align:center;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col6 {
width:190;
color:black;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
</style>

<div>
&nbsp;</div>
<p id="heading">
Troops</p>
<p>
&nbsp;</p>
<table class="tablestyle">
<tbody>
    <tr class="tableheadbold">
        <td>
            Troop</td>
        <td>
            Chartered Organization<br />
            Meeting Location</td>
        <td>
            Town/City</td>
        <td>
            Unit Leader<br />
            Comm. Chair</td>
        <td>
            Phone</td>
        <td>
            E-Mail</td>
    </tr>
    <tr class="tablerowwhite">
        <td class="col1">
            2</td>
        <td class="col2">
            Grace Episcopal Church</td>
        <td class="col3">
            Nyack</td>
        <td class="col4">
            Leader Name 1<br />
            Leader Name 2</td>
        <td class="col5">
            222-1234<br />
            333-6789</td>
        <td class="col6">
        <a  href="mailto:johnsmith@optonline.net">johnsmith@optonline.net</a><br />
            <a href="mailto:tomjones.net">tomjones.net</a></td>
    </tr>
    <tr class="tablerowblue">
        <td class="col1">
            10</td>
        <td class="col2">
            Atonement Lutheran Church</td>
        <td class="col3">
            Stony Point</td>
        <td class="col4">
            Leader Name 1<br />
            Leader Name 2</td>
        <td class="col5">
            222-1234<br />
            333-6789</td>
        <td class="col6">
        <a href="mailto:johnsmith@optonline.net">johnsmith@optonline.net</a><br />
            <a href="mailto:tomjones.net">tomjones.net</a></td>
    </tr>


</tbody>
</table>

【问题讨论】：

您要使其与哪些浏览器兼容？（如果你要使用主流浏览器和 IE9，你可以使用 :nth-of-child 来完成其中的一些。）
现有代码是什么样的？如果每个单元格中都有用于格式化的 HTML 代码，那么在 CSS 中覆盖它并不像覆盖或更改现有 CSS 那样简单。现有的 CSS 是什么样的？你这样做只是为了“清理”（这通常会导致它们被搞砸），还是有计划改变格式，而不仅仅是代码？
@Jukka，有人尝试对内容进行更改，但代码非常复杂，通常会弄乱表格的外观。一切都与许多跨度样式和内联样式一起扔 - 请参阅代码示例

标签： css html-table

【解决方案1】：

使用类选择器..

.tableStyle td {
  text-align:left;
}

.row_w td {
  background-color:#fff;
}

.row_c td {
  background-color:#ffc;
}

.col_1 {
  font-weight:bold;
  text-align:center;
}

.col_5 {
  text-align:center;
}

.row_h { /*anytime you want to customize */ }

HTML

<table class="tableStyle" >
  <tr class="row_h" ><th ></th>.. <th></td></tr>
  <tr class="row_w" ><td class="col_1" ></td>.. <td class="col_5" ></td>... </tr>
  <tr class="row_c" ><td class="col_1" ></td>.. <td class="col_5" ></td>... </tr>
</table>

其余的 TD/TH 将遵循 TR 类样式指示的样式。

【讨论】：

使用此方法，我需要为代码中的每个元素分配一个类，对吗？有没有办法将类分配给元素并使该列中的所有单元格都具有该样式？、、之间是否存在层次结构，哪些代码优先于另一个代码？
有一个 TR 的 CLASS .. 这将影响它的所有 TH 或 TR .. 话虽如此，没有必要为你添加样式 TH 因为它在具有 row_h 类的 TR 中。在任何情况下，您都想为 TH.. 指定样式。您可以使用以下内容。 TH { /*style here*/ } or with hierarchy selector.. .row_h TH { /*只影响带有类 .row_h*/ } 的 TR 内的 TH
您使用 CSS 作为内联样式。尝试创建样式表。结果相同，但编码方式更好..清理它。参考这个简单的例子。w3schools.com/cssref/css_selectors.asp
其实我没有使用内联样式。设置这个的人做到了。我正在清理它，至少使用内部样式表。
谢谢 - 您的代码与我需要的最接近，并添加了一些如下所述的内容。