css - CSS 表格元素

Question

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

所以我的问题是我可以以两种样式设置行以更改颜色，然后我将如何设置需要加粗和/或居中的 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>

score 0 · Accepted Answer

您可以使用伪选择器来定位特定的 td nth-child，这样您就不必遍历所有 td 并为它们一个一个地添加一个类。

这里有一个快速演示：http: //jsfiddle.net/Ftb6x/

不幸的是，并非每个浏览器都支持它：http: //caniuse.com/#search=nth-child

score 0 · Accepted Answer

使用类选择器..

.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>

其余的 TDs/THs 将遵循 TR 类风格指示的风格。

score 0 · Accepted Answer

标记看起来像是用 Microsoft Word 生成的。很难覆盖那里的所有呈现混乱，尤其是以点或点的分数设置的单元格宽度。我建议清理标记。我有一个小实用程序。它不会删除p单元格内无意义的标记，但可以通过设置在渲染中有效地忽略该标记

th p, td p { margin: 0; }

整理好文档后，在页面上设置字体（Arial 很无聊，但比 Tahoma 好），然后合理设置表格边框、单元格间距和单元格填充。

然后将标题单元格（我想这就是“表格标题”所指的）放在tr里面的 a 中thead，并th用于单元格。然后它们将默认为粗体并居中。它们通常应该与表的其余部分具有相同的大小，但如果需要，可以通过以下方式使其更大：

thead th { font-size: 110%; }

您可能会考虑制作第一列单元格th，因为它们听起来像标题，但也许只需设置

td:first-child { text-align: center; font-weight: bold; }

尽管这样的样式对于代码片段中的数据看起来很奇怪——它看起来应该是左对齐的。同样，电话号码不应该居中，但如果你坚持，这可以通过设置在这种情况下完成

td:nth-child(5) { text-align: center; }

要设置交替的背景颜色，如发布的代码片段中所示，请使用

tr:nth-child(odd) { background: #d2eaf1; }

如果有人为使样式在旧版本的 IE（IE 8 和更早版本）上工作所需的额外工作付费，那么您可以使用col元素添加基于列的样式，或者使用Selectivzr polyfill 可能更好。

css - CSS 表格元素

3 回答 3

Related

Reference