css - CSS表元素

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

所以我的问题是我可以用两种样式对行进行样式设置以更改颜色，然后如何对需要加粗和/或居中的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:[email protected]"><span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">[email protected]</span></a></p>
            <p style="margin: 0in 0in 0pt; line-height: normal">
                <a href="mailto:[email protected]"><u><span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">[email protected]&nbsp;</span></u></a></p>
        </td>
    </tr>

我已经使用内部样式表清理了大部分代码，但是还有两个问题。每个列的宽度不会在每个列类中使用宽度样式更改。另外，当我将字体大小从11pt更改为12pt时，它将文本分为两列，从而抛出了表的预期设计。我敢肯定，现在我错过了一个相当容易的调整。

如果有问题，我正在使用一个拥有自己的所见即所得前端的网站，并且我对源代码的访问受到限制-我可以进行一些更改，但不能完全控制，但这是我一直努力的目标。

<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:[email protected]">[email protected]</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:[email protected]">[email protected]</a><br />
            <a href="mailto:tomjones.net">tomjones.net</a></td>
    </tr>


</tbody>
</table>

最佳答案

使用类选择器。

.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类样式指示的样式。

关于css - CSS表元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13411423/