如何在html 5中使用css以不同方式设置多个表的样式

2024年2月6日 115次阅读

我目前正在为我的公司工作,从头开始使用
html5,css和
javascript.

我有几个表我想要单独设置样式,例如差异颜色大小等.

我试图给他们每个人自己的班级,我已经为我的css完成了table.table1 – 对于所有3个但是只有一个css正在工作,对于所有3个表似乎……我哪里出错了？

<form name="htmlform" method="post" target="taxshop@hotmail" action="html_form_send.php">
  <table class="contact" width="450px">
    <tr>
      <td valign="top">
        <label for="first_name">First Name *</label>
      </td>
      <td valign="top">
        <input  type="text" name="first_name" maxlength="50" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="last_name">Last Name *</label>
      </td>
      <td valign="top">
        <input  type="text" name="last_name" maxlength="50" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="email">Email Address *</label>
      </td>
      <td valign="top">
        <input  type="text" name="email" maxlength="80" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="telephone">Telephone Number</label>
      </td>
      <td valign="top">
        <input  type="text" name="telephone" maxlength="30" size="30">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="comments">Comments *</label>
      </td>
      <td valign="top">
        <textarea  name="comments" maxlength="1000" cols="25" rows="6">                       
        </textarea>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align:center">
        <input type="submit" value="Submit">  
      </td>
    </tr>
  </table>
</form>

我对这个表的CSS如下：

table.contact tr, td {
  border: 1px solid #ffffff;
  border-collapse: collapse;
  color:#000000;
  background-color: #ffffff;
  font-size: 1em;
  margin: 0;
  margin-bottom: 22px;
  padding: 4px;
  font-style: normal;
  text-align: left;
  border-bottom-style: solid;
  border-bottom-width: 0.25em;
  border-bottom-color: #ffffff;
  border-radius: 0px;
}
table.contact, td {
  padding: 5px;
  text-align: left;
}
table.contact label{
  display:inline-block;
  width:100px;
  margin-right:10px;
  text-align:right;
}

最佳答案 你在第一排错了,

https://jsfiddle.net/yvvcspha/1/

table.contact tr, td {
}

这个选择器意味着你将样式应用于; tr在table.concat中,以及在页面上的所有其他td,因为逗号分隔选择器.
如果要将样式仅应用于table.concat中的td,则应使用. table.contact td.

table.contact tr, table.contact td {
}

这将是正确的方法.

另外,请考虑更多地了解CSS和HTML5基础知识,因为您似乎缺乏关于其synthax及其工作方式的基本知识.
This系列文章(初学者部分)最终可能会对您有所帮助.

点赞