使用div删除内联CSS

时间:2015-02-01 07:17:09

标签: html css

我的这个表包含提交按钮:

<table style="border: 0; width: 15%">
    <tr style="background-color: transparent">
        <td style="border: 0">
            <form action="displayevalform" method="post">
                <input type="submit" value="Go Back">
            </form>
        </td>                       
        <td style="border: 0">
            <form action="evaluate" method="post">
                <input type="submit" value="Done">
            </form>
        </td>
    </tr>
</table>

这很有效,但为了遵循良好做法,我决定删除内联CSS并将<table>放在<div>中:

<style>
.tblreset table {
    border: 0;
    width: 15%;
}

.tblreset tr {
    background-color: transparent;
}

.tblreset td {
    border: 0;
}
</style>

<div class="tblreset">
    <table>
        <tr>
            <td>
                <form action="displayevalform" method="post">
                    <input type="submit" value="Go Back">
                </form>
            </td>                       
            <td>
                <form action="evaluate" method="post">
                    <input type="submit" value="Done">
                </form>
            </td>
        </tr>
    </table>
</div>

这不再适用。我的CSS语法有问题吗?

2 个答案:

答案 0 :(得分:0)

我更改了一些css属性,这似乎是更好的改变:

<html>
  <head>
    <style>
      .tblreset table {
        border: 2px solid yellow;
        width: 25%;
      }

      .tblreset tr {
        background-color: green;
      }

     .tblreset td {
        border: 1px solid blue;
      }
    </style>
  </head>

  <body>
    <div class="tblreset">
      <table>
        <tr>
          <td>
            <form action="displayevalform" method="post">
              <input type="submit" value="Go Back">
            </form>
          </td>                       
          <td>
            <form action="evaluate" method="post">
              <input type="submit" value="Done">
            </form>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

答案 1 :(得分:0)

我找到了。 layout.css来自模板,包含tabletrthtd的样式。我认为它必须与我的tblreset样式冲突,所以我只是将它们放在一个单独的table.css中,它现在可以正常工作。